css超出部分变成...（一行或多行）

最新推荐文章于 2024-07-31 11:19:18 发布

pipizhou16

最新推荐文章于 2024-07-31 11:19:18 发布

阅读量1k

点赞数 1

文章标签： CSS 文本溢出省略号多行 -webkit-line-clamp

本文链接：https://blog.csdn.net/pipizhou16/article/details/123549379

版权

css超出部分变成…（一行或多行）

//基础的，一行
  white-space:nowrap;//不换行
  overflow: hidden;//超出隐藏
  text-overflow: ellipsis;//变成...

//超过2行出现省略号
overflow: hidden;
text-overflow: ellipsis;
//下面设置几行，2就是2行，3就是三行
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;

//超过3行出现省略号
overflow: hidden;
text-overflow: ellipsis;
//下面设置几行，2就是2行，3就是三行
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;