可以使用CSS的text-overflow
属性来实现多行文本的显示省略号效果。
在给文本容器元素设置width
和overflow
属性之后,我们需要再设置text-overflow
属性为ellipsis
,这样就可以实现在多行文本末尾显示省略号了。
例如,假设我们有一个div
元素,宽度为200px
,并且需要在多行文本末尾显示省略号,那么可以这样设置CSS样式:
div {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
其中,display: -webkit-box;
和-webkit-box-orient: vertical;
用于将文本容器元素设置为一个垂直的弹性盒子,-webkit-line-clamp: 2;
用于限制文本行数为2行。
需要注意的是,这种方法只对支持CSS3的浏览器有效果,如果需要考虑兼容性问题,可以使用JavaScript来实现多行省略号效果。