如何设置垂直高度以防止浮动跨度溢出？答案

【问题标题】：How to set vertical height in order to prevent overflow on a floated span?如何设置垂直高度以防止浮动跨度溢出？
【发布时间】：2012-04-11 21:46:25
【问题描述】：

我有一个带有一些文本的浮动跨度。我已将溢出设置为隐藏，宽度设置为固定宽度，例如 100 像素。

现在，当文本变得太长时，它会自动换行。

我不想将高度设置为固定像素，因为这样如果我更改字体大小，我可能会忘记更新高度等等。

&lt;span style="float:left;overflow:hidden;width:100px;"&gt;Very Long Text&lt;/span&gt;

【问题讨论】：

我不确定你是否能够在不指定高度的情况下做到这一点。
我在指定高度时没有问题，我只是希望它采用相对单位。但不是 1em。因为它弄乱了行高
它应该显示 1 行文本

标签： html css overflow

【解决方案1】：

听起来您可能想尝试以下方法：

CSS：

.floated-element {
    float:left; /* Or right, whatever */
    width:100px;
    white-space:no-wrap; /* Keeps the text to one line */
    text-overflow:ellipsis; /* This will add ... to the end of text that extends beyond 100px */
    overflow:hidden;
}

HTML：

<div class="floated-element">
    ...
</div>

如果您真的想使用<span> 而不是浮动的<div>，您需要将span 的display 设置为inline-block。这将允许您指定 width，同时保留其其他内联属性。

【讨论】：

我认为溢出：省略号应该溢出：隐藏；文本溢出：省略号； .我的意思是当我把它改成那个时它在 FF 中工作。
你需要添加“溢出：隐藏；”也是。

【解决方案2】：

您不能将width 设置为内联元素。
在块元素上声明宽度和overflow:hidden 会自动垂直扩展元素，以便文本适合。

有关您尝试实现的目标的更多信息将有助于提供进一步的帮助。

编辑：

overflow:hidden 最初的想法是隐藏过多的内容（通常与固定尺寸结合使用）。您可能想重新考虑，您正在尝试做什么（您真的需要溢出吗？）。

【讨论】：

@Karim 所以你不需要设置height，元素会自动扩展，所以内容可以适应。
这是我的问题，我只想显示 1 行文本并剪切其余部分，但它只是扩展为显示多行
@Karim Aaaaaaaaaah，你为什么一开始不这么说？ ;) 你可以使用：height:1.5em;line-height:1.5em;
问题是我不想使用 height:1.5em;因为它将取决于行高。我想要一种不使用规范的方法。 1 或 100% 之类的东西可以适用于所有情况。这样万一我改变了行高，我就不需要到处寻找和改变所有的行高了:)
@Karim 好吧，那是不可能的。 % 取决于父元素，并且没有“文本行数”之类的东西。您唯一能做的就是使用LESS 或SASS 并为此使用全局变量。我使用它，它真的很舒服，但对于一个小项目来说可能有点矫枉过正。

【解决方案3】：

我找到了解决问题的方法。
我不想将高度设置为某个变量值，例如行高的值说 1.4em（因为它会随时间变化，所以我需要查找并替换应用程序中的所有值）。所以我发现的另一个修复是我可以设置“空白：nowrap；”在跨度上。
等待其他答案:)

【讨论】：

尴尬，我没想到这个... :-/
没问题。这实际上是拥有 stackoverflow 的优点之一。我实际上是通过在 stackoverflow 上搜索问题得到这个想法的 :)