为左浮动 div 或列表设置文本溢出省略号

这是我想做的：

• 创建一个仅占用所需空间（水平）的列表（即最长的列表元素）。

• 当列表不适合页面时，修剪列表文本并显示省略号。

我使用的组合white-space:nowrap and text-overflow:ellipsis。对于普通列表来说它工作得很好，但在这种情况下列表会占据页面的整个宽度。

为了强制它只占用所需的空间，我应用了float:left，但这会破坏文本溢出。

Example:

<ol style="border:1px solid red;font-size:100px;">
    <li style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Long list item. Ellipsis works.</li>
</ol>

<ol style="float:left;border:1px solid red;font-size:100px;">
    <li style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Float left list. No ellipsis here.</li>
</ol>

实例：http://jsfiddle.net/73M7G/1/ http://jsfiddle.net/73M7G/1/

因为浮动元素不会从其容器继承大小，

您需要指定宽度：;也到！

http://jsfiddle.net/73M7G/3/ http://jsfiddle.net/73M7G/3/

测试宽度：100%；

另一个测试http://jsfiddle.net/73M7G/6/ http://jsfiddle.net/73M7G/6/