css实现多行文字截断效果

背景：在做响应式系统设计的时候，经常遇到需要对标题进行文字截取的效果，如下图所示：

一、先从单行文本截断入手

      一般，实现单行文本截断比较容易，使用文本溢出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