使用jQuery解决溢出文本省略

在网页中经常会遇到字符溢出，然后使用省略“...”字符来代替溢出的文本。解决方案有很多种，可以使用服务端程序或客户端（CSS、JS）来处理。

在客户端经常有人会用 CSS的text-overflow属性及配合overflow: hidden来处理，但该属性目前只支持IE、Chrome和Safari浏览器。

至于服务端还更麻烦，因为使用不同字体（不同字体英文字母会有等宽和不等宽问题），中英文字符混排的因素，导致计算复杂。

在这里，由于原先编写的插件有几个致命的bug和依赖于CSS的line-height的定义的问题，现在我重新编写了一个略微完善的插件，也非常感谢同学们的支持。

jQuery Text Ellipsis

参数	说明	类型	默认值
ellipsis	省略符号，代替溢出的文本	String	“...”
tooltip	鼠标在元素上悬停时是否显示完整的文本	Boolean	true
line	元素显示文本的行数	Number	1

测试通过以下浏览器

IE6+，Firefox3.6+，Chrome10，Opera11，Safari5

示例截图

下载

jquery-textEllipsis-20110314.rar。