溢出文本显示为省略号的效果及其text-overflow:ellipsis;的使用

语法：

text-overflow : clip | ellipsis

参数：

clip : 　不显示省略标记（…），而是简单的裁切

ellipsis : 　当对象内文本溢出时显示省略标记（…）

说明：

设置或检索是否使用一个省略标记（…）标示对象内文本的溢出。

text-overflow:ellipsis属性在FF中是没有效果的。

示例：

div { text-overflow : clip; }

想要实现溢出时产生省略号的效果必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。结论：只要在css样式中同时使用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 即可实现溢出文本显示为省略号的效果。使用text-overflow:ellipsis对溢出文本显示省略号有两个好处，一是不用通过程序限定字数；二是有利于SEO。需要使用对对溢出文本显示省略号的通常是文章标题列表，这样处理对搜索引擎更友好，因为标题实际上并未被截字，而是局限于宽度而未被显示而已。

通常的做法是这样的：

1.overflow:hidden;

2.text-overflow:ellipsis;

3.-o-text-overflow:ellipsis;

4.white-space:nowrap;

5.width:100%;

其中，overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号；-o-text-overflow: ellipsis针对Opera；而宽度的设定主要是针对IE6；

该方法支持Internet Explorer, Safari, Chrome 和 Opera，但FF并不支持，不过可以通过jQuery来实现类似的效果。

下载这个jquery插件：jQuery ellipsis plugin

调用方法：

$(document).ready(function() {

 $(‘.ellipsis’).ellipsis();

}