jQuery关于文字内容溢出用点点点(…)省略号表示

1、jQuery限制字符字数的方法
代码很简单，使用也很方便，如下：

$(document).ready(function(){
//限制字符个数
$(“.zxx_text_overflow”).each(function(){
var maxwidth=23;
if($(this).text().length>maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+’…’);
}
});
});

所产生的结果是：页面中class为“zxx_text_overflow”的标签内部字符的个数将最多显示23个，如果原本字符个数大于23，则会在后面添加点点点省略号（…）

jQuery限制字符个数实现溢出省略号表示

2、jQuery自动判断宽度是否超出的方法
相比较前面一种方法，这个js实现的方法更加智能些（也更占用资源），通过复制节点（就是需要判断是否文字溢出省略号显示的标签层），获取其宽度，再判断其宽度是否大于样式中给定的宽度限值，大于则去掉尾部字符，添加省略号，循环，直到复制的层的宽度小于css给定值。
js代码如下：

//by zhangxinxu
var wordLimit=function(){
$(“.zxx_text_overflow”).each(function(){
var copyThis = $(this.cloneNode(true)).hide().css({
‘position’: ‘absolute’,
‘width’: ‘auto’,
‘overflow’: ‘visible’
});
$(this).after(copyThis);
if(copyThis.width()>$(this).width()){
$(this).text($(this).text().substring(0,$(this).html().length-4));
$(this).html($(this).html()+’…’);
copyThis.remove();
wordLimit();
}else{
copyThis.remove(); //清除复制
return;
}
});
}
wordLimit();

css部分需要给定一个宽度值，例如：.zxx_text_overflow{width:400px;}

jQuery宽度判定实现溢出省略号表示

狠狠地点击这里：本文各类方法的demo实例页面

最后补充：
我抽了一会儿时间把上面两个jQuery的方法结合起来，写了个小小的jQuery插件，方便对jQuery感兴趣的人直接使用了。
这个单行文字溢出用点点点省略号显示的jQuery插件的使用很简单。例如：

$(“.test1″).wordLimit(); 自动获取css宽度进行处理，如果css中未对.test1给定宽度，则不起作用
$(“.test2″).wordLimit(24); 截取字符数，值为大于0的整数，这里表示class为test2的标签内字符数最多24个

$.wordLimit();里面为空则根据宽度自动截取，有值的话就按照字符数进行截取了。

此插件js下载（右键，另存为）
源文件打包下载(zip 18.6K)

狠狠地点击这里：文字溢出省略号显示jQuery插件使用demo实例页面