使用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 text ellipsis plugin

下载

jquery-textEllipsis-20110314.rar

原文地址:https://www.cnblogs.com/nicolaszhao/p/1723195.html