在CSS中,对于多行文本的溢出显示省略号,可以使用display
属性配合-webkit-line-clamp
和-webkit-box-orient
来实现。
具体实现步骤如下:文章来源:https://www.toymoban.com/news/detail-507678.html
- 首先,将需要显示省略号的元素设置为块级元素,并且固定高度。
.ellipsis {
display: block;
height: 60px;
/* 或者根据需要设置最大高度 */
max-height: 60px;
}
- 接着,使用
-webkit-box-orient
属性将元素内部的子元素按照垂直方向排列。
.ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
- 然后,使用
-webkit-line-clamp
属性限制元素内部的文本行数。
.ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 3; /* 显示3行文本 */
}
- 最后,使用
text-overflow
属性将超出元素高度的文本内容显示为省略号。
.ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
}
完整的代码如下所示:文章来源地址https://www.toymoban.com/news/detail-507678.html
.ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
height: 60px;
max-height: 60px;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
}
到了这里,关于css多行文本溢出显示省略号的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!