为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

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

你需要指定宽度:; 也<ULs>!

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

宽度测试:100%;

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