<pre><code class="language-html">&lt;div class="ellipsis"&gt;英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？

英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？</div>

 单行文本溢出隐藏很简单了

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

 多行文本溢出隐藏有两种方式

 第一种方式：

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

第二种方式： 

这里主要来说一下第二种方式

实现思路：

1. 首先给容器设置宽度，纵向溢出隐藏 ( overflow-y : hidden )

2. 然后容器文本需要一个行高

3. 容器的高度等于( 显示的行数 * 行高 )

4. 容器设置相对定位

5. 使用伪元素添加省略号

6. 绝对定位，相对于容器，定位在右下角

7. 伪元素设置 宽度 为 1个字体大小+2px 的间隙(以防旁边文字露出)

8. 高度为一个字体大小

9. 设置背景色覆盖住最后一个文字

10. 当然也可以设置color给省略号设置颜色

.ellipsis{
    width:300px;
    height:60px;
    border:1px solid #222;
    overflow-y:hidden;
    position:relative;
    line-height:20px;
}
.ellipsis::after{
    content:'...';
    position:absolute;
    right:0;
    bottom:0;
    width:calc(1em + 2px);
    height:1em;
    background:#fff;
    line-height:1em;
    color:red;
}