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
- text-overflow文本溢出的全兼容CSS代码
- CSS基础:text-overflow:ellipsis溢出文本的显示样式
- CSS文本溢出:text-overflow:ellipsis
- css text-overflow防止文本溢出
- CSS文本溢出省略号:text-overflow:ellipsis及firefox兼容详解
- CSS文本溢出省略号:text-overflow:ellipsis及firefox兼容详解
- CSS文本溢出省略号:text-overflow:ellipsis及firefox兼容详解
- text-overflow溢出文本
- 溢出文本text-overflow的使用问题
- CSS学习笔记:溢出文本省略(text-overflow)
- CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法
- CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法
- CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法
- CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
- CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
- text-overflow:ellipsis溢出文本显示省略号的详细方法
- 设置text-overflow文本溢出隐藏时的对齐问题
- 文本的text-overflow
- Swoole整合ThinkPHP3.2系列教程二
- 记录一次.bat文件执行mysql语句
- CSS与HTML结合的方式
- UITextFieldDelegate
- Linux字符设备驱动之LCD驱动
- text-overflow文本溢出的全兼容CSS代码
- Python 中文编码
- 26 管理事务处理
- kAFL:OS内核的硬件辅助反馈模糊
- 设计模式之适配器模式
- js 简单工厂模式
- 图像分割crop设置 caffe fully convolutional cnn
- ionic2开发(五)返回按钮处理
- Angular 文件上传自定义