toc

Intro

css3新增了text-overflow属性，应用场景多是处理单行的文本省略，仅仅用来决定文本溢出时候是否显示省略号。

具体的用法为：text-overflow:clip | ellipsis | ellipsis-word

• clip表示不显示省略标记
• ellipsis表示当对象内文本溢出时显示省略号，省略标记插入最后一个字符
• ellipsis-word也是显示省略号，但是省略标记插入最后一个词。（demo中经过实验，浏览器表现与clip一样）

需要注意的事，省略号的显示还得需要white-space:nowrap和overflow：hidden属性的配合，如下面demo所用css代码：

.clip, .ellipsis, .ellipsis_word { overflow:hidden; white-space:nowrap; width:100px; background:red; } .clip { text-overflow:clip; } .ellipsis { text-overflow:ellipsis; } .ellipsis_word { text-overflow:ellipsis-word; }

值得注意的是，text-overflow属性clip和ellipsis在ie下表现都很好，除去较低版本ff支持不好，较新的浏览器都支持，因此在代码的过程中不妨一用。

demo在浏览器表现：