实现多行文字超出部分显示省略号可以使用 CSS 的 text-overflow
和 overflow
属性结合使用。具体操作步骤如下:
-
设置
white-space
属性为nowrap
,强制在一行内显示所有文字。 -
设置
text-overflow
为ellipsis
,当文字超出一行时,将多余文本显示为省略号。 -
设置
overflow
属性为hidden
,当文字超出一行时,将溢出部分隐藏起来。 -
设置
display
属性为-webkit-box
,使多行文本显示为弹性盒子。 -
设置
-webkit-box-orient
为vertical
,使弹性盒子垂直排列。 -
设置
-webkit-line-clamp
属性为需要显示的行数,使弹性盒子只显示指定的行数。
我们设置了弹性盒子显示为垂直方向,最多显示三行,超出部分显示为省略号。
可以将样式作为类名应用于需要实现多行文字超出部分省略的元素上,例如:
.text {
display: -webkit-box;
-webkit-line-clamp: 3; //显示最大行数
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}