update：2020年3月24日
文本截断是适配移动端常见的UI需求之一，是单行截断还是多行截断，多行截断又分按行高截断合适按行数截断？
一、单行截断
方法一：
对当前文本的标签：
display: block/inline-block;
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
优点：兼容性好，基本不存在兼容性问题；
缺点：只能单行截断；在部分框架中，设置nowrap会出现其他样式问题；
方法二：
对当前文本标签：
display: -webkit-box;
-webkit-line-clamp:1;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
优点：可以多行截断，并且是响应式的，可以适用于大多数移动端；
缺点：有兼容性问题，值适用于内核为webkit的浏览器，其他内核的浏览器会有兼容问题；
二、多行截断-----按行数截断
方法一：
display: -webkit-box;
-webkit-line-clamp:3;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
三、多行截断-----按高度截断
方法一：
设置父元素：
max-height: 40px;
overflow: hidden;
设置当前文本元素：
line-height: 20px;
优点：不存在兼容性问题
缺点：超过直接隐藏，显得没有过渡
方法二:
上面的方法一实现了固定高度截断，但是没有省略号，此方法使用伪类，添加了省略号：
.demo {
position: relative;
line-height: 20px;
height: 40px;
overflow: hidden;
}
.demo::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding: 0 20px 0 10px;
}
