多行文本显示省略号

最新推荐文章于 2022-08-23 16:17:34 发布

原创最新推荐文章于 2022-08-23 16:17:34 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#省略号

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用CSS实现多行文本溢出时显示省略号的方法，通过特定的样式规则，可以确保文本在限定高度内完整展示，超出部分以省略号代替，适用于各种网页布局需求。

大于两行的以…显示

// 多行文本显示省略号
.text-multi-line{
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  white-space: normal;
  line-height: 1.4;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}