欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-28 12:02:09
...

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">HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO HELLO </div>
 
$(document).ready(function(){ 
$(".zxx_text_overflow_5").each(function()
{ var maxwidth=55;
 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