我有一个列表,每个列表项都有动态长度。列表的最大行数为2行。对于那些超过两行的文本,应该以点结束。可以使用"white-space: nowrap;"。但是我怎么指定这两条线呢?如有任何建议,欢迎指教。
li {
line-height: 25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100px;
border: 2px solid #ff0000;
}
<ul>
<li>long long name</li>
<li>long long name long long name</li>
<li>long long name long long name long long name</li>
</ul>
请看我的小提琴
我使用伪元素在每隔一行的右侧定位一个省略号。我还添加了一些渐变背景,因为这种方法不会切断整个单词。
CSSli {
width:100px;
max-height: 50px;
line-height: 25px;
border:2px solid #ff0000;
position: relative;
overflow: hidden;
}
li:after {
content:"...";
position: absolute;
top: 25px;
right: 0px;
z-index: 2;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 30%, #fff 100%);;
}