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，如果有興趣的童鞋可以點擊上方鏈接查看