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