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

我有一些文本的浮动跨度。
我已经设置溢出隐藏和宽度固定宽度说100px。
现在当文本变得太长时，它只是包装。
我不想将高度设置为固定px，因为如果我更改字体大小，我可能会忘记更新高度等等。任何想法？如何设置垂直高度以防止浮动跨度溢出？

<span style="float:left;overflow:hidden;width:100px;">Very Long Text</Span>

来源

2012-03-28 Karim

我不确定你会不用指定高度就可以做到这一点。 – Alex 2012-03-28 10:04:48

我没有指定高度的问题，我只是希望它在相对单位。但不是1em。因为它搞砸了相对于什么寿命的线 - 高 – Karim 2012-03-28 10:08:39

？ – Alex 2012-03-28 10:10:01

听起来像是你可能想尝试这样的：

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>，您需要将范围的display设置为inline-block。这可让您指定width，同时保留其他内联属性。

来源

2012-03-28 17:01:01 Ryan

我认为溢出：省略号应该溢出：隐藏;文本溢出：省略号; 。我的意思是它在FF中的工作，当我改变它。 – Karim 2012-03-28 17:13:06

哎呀！你是对的。更新了帖子。 – Ryan 2012-03-28 17:19:34

那么你需要添加“overflow：hidden;”太。 – Karim 2012-03-28 18:21:55

你不能设置一个width内联元素。
在块元素上声明宽度和overflow:hidden垂直自动展开元素以使文本适合。

有关您试图达到的目标的更多信息将有助于提供进一步的帮助。

编辑：

的overflow:hidden初始想法是隐藏过多含量（通常一起使用的固定尺寸）。你可能想重新思考，你想做什么（你真的需要这种溢出？）。

来源

2012-03-28 10:05:20 Christoph

抱歉元素浮动:)我将更新问题 – Karim 2012-03-28 10:06:22

@Karim所以你不需要设置'height'，元素会自动扩展内容可以适应 – Christoph 2012-03-28 10:09:15

和这个我的问题，我只想显示1行文本和其余部分，但它只是展开显示在几行 – Karim 2012-03-28 10:10:24

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

来源

2012-03-28 16:53:15 Karim

尴尬，我没有想到这个...： -/ – Christoph 2012-03-29 07:29:00

没问题。这实际上是具有stackoverflow的优势之一。我的想法其实是通过在stackoverflow上搜索问题:) – Karim 2012-03-29 16:44:57

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

回答

相关问题