在 CSS 中使用 text-overflow: ellipsis
属性可以实现有限行文本溢出省略号的效果。同时需要设置 white-space: nowrap
属性使文本不换行,以及 overflow: hidden
属性使超出部分被隐藏。
例如,将一个 <div>
元素内的文本限制为两行,并在溢出时显示省略号,可以使用以下代码:
div {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
其中,-webkit-box
属性用于实现多行截断,-webkit-line-clamp: 2
属性用于设置行数,-webkit-box-orient: vertical
属性用于设置文本方向为垂直方向。在其他浏览器中,可以使用 display: -webkit-box;
的变体 display: -moz-box;
或 display: box;
,以及 line-clamp
和 box-orient
的对应前缀属性来实现相同的效果。
需要注意的是,这种方法只适用于固定高度的容器,并且需要设置容器的高度为文本行高的两倍或以上,以确保溢出的文本能够被截断。