4

我有一段HTML代码如下：

<div style="width:100px;border: 1px solid red;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 auto">
    <span style="float: left">LeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeft</span>
</div>

但ellipsis似乎不起作用。如果我删除 的float属性span，它可以用“LeftLeft...”以正常方式显示。text-overflow和是否float相互冲突？

4

3 回答 3

5

text-overflow财产规范说

此属性指定当内联内容在其具有“溢出”而不是“可见”的内联进展方向上溢出其块容器元素（“块”）时呈现。

浮动孩子不是内联内容，它们被认为是一种特殊的块内容（它们的计算值display是block）。这就是为什么他们需要拥有自己的text-overflow（因为这个属性不是继承的）以及宽度限制。例如

<div style="width:100px;border: 1px solid red;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 auto">
    <span style="float: left; max-width: 100%; overflow:hidden;text-overflow:ellipsis;">LeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeft</span>
</div>

（见 JSfiddle）

于 2013-09-07T22:39:16.320 回答
0

是的，考虑到父元素上的溢出 CSS 属性，并且属性设置为自动或隐藏，然后父元素将展开以包含浮动，有效地将其清除为后续元素。

所以浮动属性根本不起作用。

不确定是否有人对此有任何破解。

检查文档，http://www.w3.org/TR/css3-box/#float 它适用于 CSS3，但也适用于 CSS2。

于 2013-09-07T21:38:07.653 回答
0

尝试在 span 元素上使用此样式：

<span style="float:left; overflow:hidden"><!--Content--></span>
于 2012-06-20T06:43:26.293 回答