Question

我有一段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的{{1}}属性，则可以使用'LeftLeft ...'以正常方式显示。 span和text-overflow是否相互冲突？

Answer 1

The spec for text-overflow property说

此属性指定内联内容溢出时的呈现它的块容器元素（“块”）在其内联进程中除'可见'以外的'溢出'的方向。

浮动子项不是内联内容，它们被视为特殊类型的块内容（display的计算值为block）。这就是为什么他们需要拥有自己的text-overflow（因为这个属性不是继承的）以及宽度限制。 e.g。

<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>

（see JSfiddle）

Answer 2

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

<span style="float:left; overflow:hidden"><!--Content--></span>

Answer 3

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

所以浮动财产根本不起作用。

不确定是否有人有任何黑客攻击。

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

当子元素具有“浮动”时，为什么“文本溢出”不起作用？

3 个答案: