为浮点型左侧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屋!