为float left div或list设置文本溢出省略号

Question

这是我想做的事情：

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

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

我使用white-space:nowrap和text-overflow:ellipsis的组合。它适用于普通列表，但在这种情况下，列表占用页面的整个宽度。

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

示例：

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

Answer 1

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

你需要指定宽度：;到＆lt; ULs＆gt;太！

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

测试宽度：100％;

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

Answer 2

我建议将列表设为内联块，在此处查看http://jsfiddle.net/73M7G/4/