我有一个 HTML 列表如下...
<ul>
<li>Some text</li>
<li>Some more text</li>
<li>Even more text</li>
</ul>
...我正在使用 display: inline-block;
将列表项保持在一条水平线上。
ul
的 width
是有限的,当它不适合 width
时,我想使用省略号截断最后一项>.
所以需要看起来像:
一些文本一些更多的文本甚至更多...
我试过在 ul
上使用 text-overflow: ellipsis;
,但没有效果。
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 250px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
}
li {
display: inline-block;
margin-right: 10px
}
<ul>
<li>Some text</li>
<li>Some more text</li>
<li>Even more text</li>
</ul>
这是一个 fiddle
最佳答案
我知道了
设置 <li>
时工作至 display: inline
.
specification对于 text-overflow
声明它仅适用于 block 元素。我想有 display: inline-block
在 <li>
让他们有自己的 block 上下文,因此 parent 的 text-overflow
属性不再适用。
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
text-overflow: ellipsis;
white-space: nowrap;
width: 250px;
}
li {
display: inline;
margin-right: 10px
}
<ul>
<li>Some text</li>
<li>Some more text</li>
<li>Even more text</li>
</ul>
关于html - 如何截断水平 ul 列表中最后一项的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33502405/