实现单行文本溢出的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（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。
