用法：

为已有宽度的盒子添加属性:

效果:

动图中代码分析：

动图内容可以分成四部分:

① 初始状态, 文字内容超过宽度 所以会自动换行

② 添加 white-space: nowrap; 让内容在一行显示，不换行，但是发生了文字溢出

③ 添加 overflow: hidden; 让内容的溢出部分隐藏。

④ 添加 text-overflow: ellipsis; 如果溢出部分是文字，那么就让溢出的前一个文字显示省略号。

多行省略号只能支持 webkit 内核浏览器, IE系就不兼容，像京东这种大型互联网电商网站，他们也是用了这种做法，IE系浏览器 京东选择了放弃兼容, 只是显示固定行数, 并没有以省略号结尾。

用法：

为已有宽度的盒子添加属性:

代码：

运行：

代码解释:

font-size: 文字大小

line-height: 文字一行所占高度

让 line-height 比 font-size 大一点, 是为了两行文字间有点间距, 不然看着太密集。

height: 是为了兼容IE系浏览器。因为 -webkit-line-clamp 在IE系浏览器无效, 所以无法控制显

示几行， 只能通过设置 div 高度, 然后让溢出内容隐藏的方式来实现效果。

为了防止IE系浏览器隐藏溢出后, 最后一行只剩文字上半部的情况，建议 div 高度按照行高设置 height = line-height * 最多显示的行数。