css-float - 为什么当子元素有 'text-overflow' 时 'float' 不起作用？

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

Answer 1

The spec for text-overflow property说

This property specifies rendering when inline content overflows its block container element ("the block") in its inline progression direction that has ‘overflow’ other than ‘visible’.

float 子项不是内联内容，它们被视为特殊类型的 block 内容(它们的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>

( see JSfiddle )