您的位置:首页 > Web前端 > CSS

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

2017-08-29 16:04 393 查看

废话不多说,一下代码可以运行在所有的浏览器中,包括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:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: