小程序CSS实现单行和多行文本溢出显示省略号

最新推荐文章于 2024-07-21 17:07:13 发布

原创最新推荐文章于 2024-07-21 17:07:13 发布 · 898 阅读

0 ·

CC 4.0 BY-SA版权

博客介绍了使用CSS实现文本省略号的方法，包括单行省略号和多行省略号。单行省略号通过设置overflow、text - overflow和white - space属性实现；多行省略号则需额外设置display、-webkit - box - orient、-webkit - line - clamp等属性。

1.单行省略号
.textview{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}

2.多行省略号
.textview{
display: -webkit-box ;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
}

-webkit-line-clamp:2;//这是设置显示的多少行。

-webkit-box-orient：vertical。

word-break：规定自动换行的处理方法。