HTML LI元素文本超出两行显示省略号
在HTML中,你可以使用CSS的'text-overflow'属性来控制文本的溢出显示省略号。结合'white-space'属性设置为'nowrap'可以限制只显示两行文本。
下面是一个示例代码:
<style>
li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
<ul>
<li>这是一段很长很长的文本,如果超过两行将显示省略号。</li>
</ul>
在上面的示例中,使用了'-webkit-box'和'-webkit-line-clamp'属性来限制只显示两行文本,并且添加了'-webkit-box-orient'属性来指定垂直方向排列。
请注意,这个方法在大多数现代浏览器中都能正常工作,但不支持IE浏览器。如果你需要支持IE浏览器,你可能需要使用JavaScript来实现这个效果。
原文地址: https://www.cveoy.top/t/topic/qnDX 著作权归作者所有。请勿转载和采集!