css---实现文本超过两行时显示省略号（...）的效果

要实现当文本超过两行时显示省略号的效果，可以使用CSS的-webkit-line-clamp属性结合display: -webkit-box和-webkit-box-orient: vertical来实现。以下是具体的CSS代码示例：




.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

接下来，将这个类应用到你的HTML元素上：




<div class="ellipsis-multiline">
  这里是一段很长的文本，如果它超过两行，那么超出的文本将会被省略号(...)代替，显示为两行。
</div>

注意：-webkit-line-clamp属性是非标准属性，主要用于WebKit引擎的浏览器，如Chrome、Safari等。其他浏览器可能不支持此属性，因此在使用时需要考虑兼容性问题。

css---实现文本超过两行时显示省略号（...）的效果

评论已关闭

推荐阅读