我一直在使用white-space: no-wrap、text-overflow: ellipsis和overflow: 隐藏的CSS属性来为多行文本创建省略号截断。然而,当使用 flexbox 时这不起作用。
使用 flex 时,text-overflow: ellipsis 似乎总是将 flex-item 的高度截断为单行。
是否可以对多行文本使用 flex 和 css 省略号截断的某种组合?
<div className="flex-container">
<div className="flex-item">
<p>long multiline text that i would like to truncate</p>
</div>
</div>
我可以让它通过单行截断来工作。结合 Flex + White-Space 手动设置高度:nowrap 不起作用。
您可以使用此代码进行省略号的多行截断
.text-block-div {
display: block;
display: -webkit-box;
max-width: 100%;
height: 43px;
margin: 0 auto;
font-size: 14px;
line-height: 1;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
您可以在具有类 .text-block-div 的 div 中使用文本来实现省略号效果。
注意:省略号效果需要webkit,这意味着如果有人使用不支持webkit的浏览器查看它,他们将看不到...但文本仍然会在正确的位置被截断,所以这个效果仍然适用于所有主要浏览器。