[分享]css两行显示省略

CSS是一种用于网页排版的样式表语言，可以让我们实现很多有趣的效果，比如让一段长文本只显示两行，并在末尾加上省略号。下面我们来看下如何使用CSS实现这个效果： .twolines { display:...

CSS是一种用于网页排版的样式表语言，可以让我们实现很多有趣的效果，比如让一段长文本只显示两行，并在末尾加上省略号。下面我们来看下如何使用CSS实现这个效果：

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

我们先使用.display属性将元素的display属性设置为"-webkit-box"，然后使用.-webkit-line-clamp属性将元素的显示行数设置为2行，接着使用.-webkit-box-orient属性将元素的排列方式设置为垂直方向的盒子。设置overflow为hidden，把多余的文本隐藏在盒子中，最后使用text-overflow属性添加省略号。

这样我们就可以轻松地实现两行显示省略的效果，让长文本变得更加美观和易读。