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

转自：http://www.cnblogs.com/leejersey/archive/2013/09/17/3327554.html

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，如果有兴趣的童鞋可以点击上方链接查看