jQuery 限制多行字符字数的方法 换成省略号

1.多行文本 在html中常见 用p标签

可是因为版面限制有时候只能显示部分内容

所以须要对内容加以修饰

一般换用省略号代替比较好 或者 READ MORE 链接

限制只显示某些省略号

单行文本 可以直接用css实现

zxx_text_overflow_1{
width:27em; 
white-space:nowrap; 
text-overflow:ellipsis;
-o-text-overflow:ellipsis; 
overflow:hidden;
}

 

但是多行文本 比较难办 一般会采用jqery或者js实现

jquery有类似的插件 just google it

或者采用下列办法限制字符数

 

<div class="zxx_text_overflow_5">ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　ＨＥＬＬＯ　</div>

 

$(document).ready(function(){ 
$(".zxx_text_overflow_5").each(function()
{ var maxwidth=５５;
 if($(this).text().length>maxwidth){
 $(this).text($(this).text().substring(0,maxwidth)); 
$(this).html($(this).html()+'...'); 
} 
});
 });

 

 

完整版 请参考 http://www.zhangxinxu.com/study/200909/text-overflow-ellipsis-so-on.html

 

评论

1 楼 yuechen323 2012-03-01  

不错 正需要呢  以前是在 action里面处理返回的文字效果 呵呵