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

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属性span,它可以用'LeftLeft ...'以正常方式显示.是否text-overflow和float相互冲突？

Answer 1

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)