多行文字截断

做响应式系统设计的时候遇到需要对标题进行多行文字截取的效果，如下图：

看似十分简单的标题截断效果，但是竟然没有一个统一 CSS 属性实现标准，需要用到一些奇淫妙计来实现，一般来说，在做这样文字截断效果时我们更多是希望：

兼容性好，对各大主流浏览器有好的支持

响应式截断，根据不同宽度做出调整

文本超出范围才显示省略号，否则不显示省略号

省略号位置显示刚好

基于上述的准则，下面我就讲介绍各种技巧实现截断效果，并根据上述的评判标准得出最优解(代码我都传到 jsfiddle 平台，可点击 demo 地址查看)。

单行文本截断 text-overflow
文本溢出我们经常用到的应该就是 text-overflow:ellipsis 了，相信大家也很熟悉，只需轻松几行代码就可以实现单行文本截断。

div 
{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

https://mmbiz.qpic.cn/mmbiz_gif/aVp1YC8UV0e9LkaNtpOdQWLC24do9CzoLhoQIqVBl73GAlmxNtQuzbGE5N1QlY9wscJI2fOyEjh09Kg52MYWgw/640?tp=webp&wxfrom=5&wx_lazy=1
属性浏览器原生