作者 周海汉 abloz.com 2011-9-14 网页中有时需要对过长文本进行截断。如标题太长，又不能换行，此时可以用三个点省略号(…)进行替换不能显示的内容，或直接截断。这在手机小屏显示中尤其有用。
| CSS3中有text-overflow属性。text-overflow可以分为两个属性：text-overflow-mode，控制截断显示方式，text-overflow-ellipsis：控制截断显示字符。二者合起来就是text-overflow:ellipsis | clip。 |
| text-overflow-mode 的值：clip | ellipsis | ellipsis-word 初始值为clip,截断。对所有块级元素起作用。 |
text-overflow-ellipsis的值：[
不过，firefox一直对text-overflow没有支持。其计划是firefox 7.0支持该属性。目前只能通过js，xul等其他方式来实现。
示例：
-
p {
-
white-space: nowrap;
-
width: 100%; / IE6 needs any width /
-
overflow: hidden; / ”overflow” value must be different from ”visible” /
-
-
-o-text-overflow: ellipsis; / Opera 9-10 /
-
text-overflow: ellipsis; / IE, WebKit (Safari, Chrome), Firefox 7, Opera 11 /
-
}
其中，white-space:nowrap和overflow:hiden一定需要，否则光有text-overflow并不能达到想要的效果。opera 的早期版本用-o-text-overflow来设置。
我们只好等待firefox的新版 firefox7 ，来支持该属性了。
浏览器对文本截断CSS3兼容性：
| Internet Explorer | **6.0** | `text-overflow` | `ellipsis | clip` |
| Firefox (Gecko) | **7.0** (7.0) | `text-overflow` | `ellipsis | clip` |
| Opera (Presto) | **9.0** (2.0) | `-o-text-overflow` | `ellipsis | clip` |
| **11.0** (2.7) | `text-overflow` | `ellipsis | clip` | |
| Safari | Chrome | WebKit | 1.3 | 1.0 | 312.3 | `text-overflow` | `ellipsis | clip` |
IE8 有个-ms-text-overflow，因不符合标准，不推荐使用。
参考：
http://www.w3.org/TR/2002/WD-css3-text-20021024/#text-overflow-props
https://developer.mozilla.org/en/CSS/text-overflow
http://cssshare.com/1/css3wen-ben-jie-duan-text-overflow 如何做firefox文本截断
http://ipmtea.net/css/201011/16_407.html 文本截断示例
如非注明转载, 均为原创. 本站遵循知识共享CC协议,转载请注明来源
