text-overflow文本溢出的全兼容CSS代码

来源:互联网 发布:串口调试软件 编辑:程序博客网 时间:2024/05/18 02:00

废话不多说,一下代码可以运行在所有的浏览器中,包括IE8,至于谷歌和火狐能兼容到最低几,这个我没做测试。

<style>.IE_clamp{white-space: nowrap; overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 1;display: -moz-box;display:block;-webkit-box-orient: vertical;-moz-box-orient: vertical;}</style>


长度需要自己设置。该样式只支持单行,若谷歌内核可以通过设置-webkit-line-clamp后面的数字来达到显示 几行溢出的效果,可自行测试。

注意:网上有些方法中会多出word-break的样式,但是这个样式会让IE无法显示文本溢出,所以不可引入。

下面是我做的大致的兼容性测试截图。

这是谷歌:


这是火狐:


这是edge:


IE7:


IE8:


IE9:


IE10:


IE11:



阅读全文
1 0