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:
相关文章推荐
- CSS基础:text-overflow:ellipsis溢出文本的显示样式
- CSS基础:text-overflow:ellipsis溢出文本的显示样式
- css text-overflow防止文本溢出
- CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法
- 真正做到兼容各大主流浏览器的text-overflow(文本溢出)解决方案
- CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
- CSS学习笔记:溢出文本省略(text-overflow)
- CSS文本溢出:text-overflow:ellipsis
- CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
- CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法
- CSS学习笔记:溢出文本省略(text-overflow)
- CSS溢出文本省略(text-overflow)
- CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法
- CSS学习笔记:溢出文本省略(text-overflow)
- css基础 -文本溢出 text-overflow:ellipsis;
- text-overflow:ellipsis溢出显示省略号兼容所有浏览器的解决办法
- CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)
- 浏览器兼容CSS代码:按钮文字垂直居中(input button text vertical align)
- 长文本溢出显示省略号(…) text-overflow: ellipsis