为浮点型左侧div或列表设置文本溢出省略号 [英] Setting text-overflow ellipsis for a float left div or list

问题描述

这里是我想做的：

• 创建一个只占用空间

• Create a list that only takes up as much room (horizontally) as needed (i.e. as the longest list element.

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

When the list doesn't fit on the page, trim the list text and show an ellipsis.

我使用 white-space：nowrap code> text-overflow：ellipsis 。它对正常列表很好，但在这种情况下，列表占用页面的整个宽度。

I use a combination of white-space:nowrap and text-overflow:ellipsis. It works fine for a normal list, but in that case the list takes up the full width of the page.

为了强制它只占用所需的空间，我应用了一个 float：left ，但这打破了文本溢出。

To force it to only take as much space as needed I applied a float:left, but this breaks the text-overflow.

示例：

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

推荐答案

元素不会从其容器继承大小，

because a floating element does not inherits the size from its container,

您需要指定width :;例如， ULs>太！

you need to specify the width:; to < ULs > too!

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

测试宽度：100％;

test with width:100%;

$ b http://jsfiddle.net/73M7G/6/

这篇关于为浮点型左侧div或列表设置文本溢出省略号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！