背景：在做响应式系统设计的时候，经常遇到需要对标题进行文字截取的效果，如下图所示：
一、先从单行文本截断入手
一般，实现单行文本截断比较容易，使用文本溢出text-overflow:ellipsis;就可以实现单行文本截断了，示例如下：
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
在单行文本截断的基础上，我们模拟多行文本，使用overflow:hidden进行省略；
<style>
height:40px;
line-height:20px;
overflow:hidden;
</style>
<p>希望是一个好东西，希望是一个好东西，也许是最好的，好东西是不会,希望是一个好东西，也许是最好的，
好东西是不会,希望是一个好东西，也许是最好的，好东西是不会</p>
此情况，适用于多行列数已知，使用overflow:hidden进行省略，但是无法达到自适应多行，进行自动省略，并且没有省略号出现。
二、使用-webkit-line-clamp实现，适用于移动端
div {
display: -webkit-box;
overflow: hidden;
-webkit-lin-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
它需要和display、-webkit-box-orient和overflow结合使用：
display:-webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示；
-webkit-box-orient;必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式；
text-overflow:ellipsis;可选属性，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本。
从效果上来看，它的优点有：
①响应式截断，根据不同宽度做出调整；
②文本超出范围才显示省略号，否则不显示省略号；
③游览器原生实现，所以省略号位置显示的刚好。
使用场景：多用于移动端页面，因为移动设备游览器更多是基于webkit内核，除了兼容性不好，实现截断的效果不错。（因为-webkit-line-clamp是一个不规范的属性，只有webkit内核的游览器才支持这个属性，像Firefox，IE游览器系统都不支持这个属性，游览器兼容性不好。）
三、定位元素实现多行文本截断
这种方法就是设置相对定位的容器高度，用包含省略号（...）的元素模拟实现，实现方式如下：
p {
position: relative;
line-height: 18px;
height: 36px;
overflow: hidden;
}
p::after {
content: "...";
font-weight: bold;
position: absolute;
bottom: 0;
right: 0;
padding: 0 20px 1px 45px;
/*为了展示更好的效果*/
background: -webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0)),to(white),color-stop(50%,white));
background: -moz-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
background: -o-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
background: -ms-linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
background: linear-gradient(to right,rgba(255,255,255,0),white 50%,white);
}
通过伪元素绝对定位到行尾并遮住文字，再通过overflow:hidden隐藏多余文字。
从实现效果来看，它所具备的优点：
①兼容性好，对各大主流游览器有较好的支持；
②响应式截断，根据不同宽度做出调整。
使用场景：文字内容较多，确定文字内容一定会超过容器的，那么选择这种方式不错。
参考博客：纯CSS实现多行文字截断 https://segmentfault.com/a/1190000016879657
黑科技：CSS定制多行省略 https://segmentfault.com/a/1190000008649988