多行文本溢出显示省略号

实现单行文本溢出的CSS

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

实现多行文本溢出的CSS

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

但是！
实现多行文本溢出显示省略号的时候webpack不编译-webkit-box-orient: vertical;这就很坑爹了!
但是！我们有解决方法的呀！！！

/* autoprefixer: off */
 -webkit-box-orient: vertical; // 参考 https://github.com/postcss/autoprefixer/issues/776
/* autoprefixer: on */

完美解决！
今天我发现这种解决方法的一个问题，就是项目上线时会压缩代码，会清除掉注释以及多余的空格空行，所以这个方法就不行了，所以我将-webkit-box-orient: vertical;放到行内了。
多行文本溢出还有一种解决方法

.box{
  position: relative; 
  line-height: 20px; 
  max-height: 40px;
  overflow: hidden; 
  width: 200px;}
.box::after{
  content: "..."; 
  position: absolute;
  bottom: 0; 
  right: 0; 
  padding-left: 40px;
  background: -webkit-linear-gradient(left, transparent, #fff 55%);
  background: -o-linear-gradient(right, transparent, #fff 55%);
  background: -moz-linear-gradient(right, transparent, #fff 55%);
  background: linear-gradient(to right, transparent, #fff 55%);
}

该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。
注意：

• 将height设置为line-height的整数倍，防止超出的文字露出。
• 给p::after添加渐变背景可避免文字只显示一半。
• 由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：…）；兼容ie8需要将::after替换成:after。