CSS多行文本省略遇到的坑

众所周知，作为前端开发者而言，经常会碰到文本过长，需要在一定字数或者范围内将多余的文本省略，通常是以‘...’来表示后面还是文本数据。分为单行文本与多行文本溢出。
       1.单行文本的实现方法：

       2.多行文本的实现方法：

       适用范围：
       因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
       注：
       -webkit-line-clamp用来限制在一个块元素显示的文本的行数。
       为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
       display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
       -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

那么问题来了，有时候设置多行省略会失效，这个是为什么呢？原来是因为部分框架会在默认编译的时候过滤掉 " -webkit-box-orient: vertical; "这一句代码，所以就会出现你所看到的多行文本省略失效的问题。然而，这个问题该怎么去解决呢？其实很简单，只需要你加上两行注释，就能完美的解析你的全部代码。解决方法就是改变方式，关闭 autoprefixer 然后再开启：用注释就可以做到。

注意：在sass中注释略有不同。这也是容易被忽视的坑。