html两行溢出隐藏,多行溢出隐藏显示省略号的兼容性问题

超出一行隐藏显示省略号，相信大家都已经很熟悉了，用css样式来控制，而且没什么兼容性问题

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

一行超出隐藏显示省略号

注意：要给它宽度

多行超出隐藏显示省略号也是可以用css样式来控制的，如下

display: -webkit-box;

overflow: hidden;

text-overflow: ellipsis;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

多行超出隐藏显示省略号

注意：要给它宽度和高度

嗯，看起来没什么问题，但是在某些浏览器打开发现是这个样子的

多行溢出样式控制有些浏览器不兼容

发现-webkit-line-clamp是没有执行到的，测试了一下，发现在谷歌、QQ浏览器、搜狗浏览器，360浏览器的极速模式下是正常显示省略号的，在火狐、ie、360兼容模式下是没有显示省略号的，那么这个问题该怎么解决呢，这个时候，就要用到js啦

html代码

css代码

js代码

这样就可以解决浏览器不兼容的问题了