移动端浏览器省略号 text-overflow: ellipsis 的兼容性

分类：Html_Css| 发布：佚名| 查看：587 | 发表时间：2015/3/15

text-overflow是一个常用的CSS属性，作用是让文本超出容器区域的部分以省略号显示。

要让它生效，还需要配合设置其它几个css属性。示例CSS代码：

1p { 
2     white-space: nowrap; 
3     width: 100%; /* IE6 needs any width */
4     overflow: hidden; /* "overflow" value must be different from "visible" */
5     -o-text-overflow: ellipsis; /* Opera 9-10 */
6     text-overflow: ellipsis; /* IE, WebKit (Safari, Chrome), Firefox 7, Opera 11 */
7}

text-overflow的浏览器兼容情况见下表：

浏览器	版本	支持
Internet Explorer	6.0+	`text-overflow`	`ellipsis \| clip`
Firefox (Gecko)	7.0+	`text-overflow`	`ellipsis \| clip`
Opera (Presto)	9.* - 10.*	`-o-text-overflow`	`ellipsis \| clip`
Opera (Presto)	11.0+	`text-overflow`	`ellipsis \| clip`
Safari \| Chrome \| WebKit	1.3 \| 1.0 \| 312.3	`text-overflow`	`ellipsis \| clip`

可以看出，Firefox对text-overflow严重落后于其它浏览器，IE从数年前的6.0版本就支持了这个属性，而Firefox在IE6推出之后的漫长岁月里，Firefox经过了4次大版本号升级都没有提供支持，直到Firefox 7.

到目前为止，Firefox之外的浏览器都支持text-overflow css了，所以开发者只需要针对Firefox 3.x - 6.x做特别处理。

针对Firefox，做省略号效果，目前主要有3种方案，分别是：(1)css binding xml, (2)javascript截取，(3)省略号遮盖。

后续我准备对javascript截取法单独写一篇文章，介绍我对该问题的深入挖掘。

365据说看到好文章不转的人，服务器容易宕机！

标签：省略号 CSS3 CSS

原创文章如转载，请注明：转载自郑州网建-前端开发　http://camnpr.com/
本文链接：http://camnpr.com/html-css/1946.html

相关文章

CSS3的30个效果例子：实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦(2015-3-14 19:31:8)
CSS3动起来 - 旋转90、180、270度 - 垂直、水平翻转(2014-11-12 16:11:11)
画纯CSS三角（border-left-color、Unicode符号、CSS3的transform）(2014-10-27 11:15:12)
Bootstrap好搭档 - Font Awesome 完美的CSS图标字体库(2014-9-1 15:29:18)
用jQuery控制内容长度超出规定长度显示省略号(2014-5-24 14:5:27)
IE6中常见CSS兼容性解决技巧及常见浏览器兼容性问题与解决方案(2014-2-25 17:36:26)
详解haslayout 解决IE样式bug(2014-2-25 17:11:4)
CSS 居中方法汇总(hacks, translate(-50%,-50%), 绝对定位等)(2014-2-13 20:24:36)
丰富直观的设计用户体验设计中的巧妙过渡(2014-2-13 14:11:10)
css九宫格用负margin使元素的border叠加(2013-12-13 13:53:50)

豫ICP备10013645号 Copyright 2009-2022 camnpr.com

关于我们 - 广告合作 - 免责声明 - 投诉建议