css溢出隱藏

如果實現(xiàn)單行文本的溢出顯示省略號同學(xué)們應(yīng)該都知道用text-overflow:ellipsis屬性來，當(dāng)然還需要加寬度width屬來兼容部分瀏覽。

實現(xiàn)方法：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

image.png

但是這個屬性只支持單行文本的溢出顯示省略號，如果我們要實現(xiàn)多行文本溢出顯示省略號呢。

接下來重點說一說多行文本溢出顯示省略號，如下。

實現(xiàn)方法：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

多行溢出隱藏

 display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

image.png