css文字多行溢出省略

文字的单行省略

一般来说我们将文字溢出隐藏都是单行文字隐藏，使用的是下面的方式：

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

在对文字设置改样式后文字会强制不换行，然后被隐藏的部分会被省略号代替，但是如果是文字换行之后再隐藏呢？例如下面的效果

可以在不使用js的前提下将文字隐藏吗？答案是可以的。

---

多行文字的溢出隐藏

多行文字的溢出隐藏用的是下面的样式

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

这种方式有兼容性，所以必须带上-webkit-前缀，不得不说css的样式是真的多也是真的牛批。