~~~ 单行省略号 ① 初始状态, 文字内容超过<div>宽度 所以会自动换行 ② 添加 white-space: nowrap; 让内容在一行显示，不换行，但是发生了文字溢出 ③ 添加 overflow: hidden; 让内容的溢出部分隐藏。 ④ 添加 text-overflow: ellipsis; 如果溢出部分是文字，那么就让溢出的前一个文字显示省略号。 多行省略号 多行省略号只能支持 webkit 内核浏览器, IE系就不兼容，像京东这种大型互联网电商网站，他们也是用了这种做法，IE系浏览器 京东选择了放弃兼容, 只是显示固定行数, 并没有以省略号结尾 width: 150px; height: 32px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; border: 1px solid black; 代码解释: font-size: 文字大小 line-height: 文字一行所占高度 让 line-height 比 font-size 大一点, 是为了两行文字间有点间距, 不然看着太密集。 height: 是为了兼容IE系浏览器。因为 -webkit-line-clamp 在IE系浏览器无效, 所以无法控制显 示几行， 只能通过设置 div 高度, 然后让溢出内容隐藏的方式来实现效果。 为了防止IE系浏览器隐藏溢出后, 最后一行只剩文字上半部的情况，建议 div 高度按照行高设置 height = line-height * 最多显示的行数。 ~~~