<div class="ellipsis">英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？英语阅读看不懂？</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;
第二种方式：
这里主要来说一下第二种方式
实现思路：
首先给容器设置宽度，纵向溢出隐藏(overflow-y : hidden)
然后容器文本需要一个行高
容器的高度等于(显示的行数 * 行高)
容器设置相对定位
使用伪元素添加省略号
绝对定位，相对于容器，定位在右下角
伪元素设置宽度为1个字体大小+2px的间隙(以防旁边文字露出)
高度为一个字体大小
设置背景色覆盖住最后一个文字
当然也可以设置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;}
