标签:
1 .zxx_text_overflow_1{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}
1 HTML部分: 2 <div class="zxx_text_overflow_5">你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊!</div>
1 没有css啦,只有js代码: 2 $(document).ready(function(){ 3 //限制字符个数 4 $(".zxx_text_overflow_5").each(function(){ 5 var maxwidth=23; 6 if($(this).text().length>maxwidth){ 7 $(this).text($(this).text().substring(0,maxwidth)); 8 $(this).html($(this).html()+‘...‘); 9 } 10 }); 11 });
1 HTML部分: 2 <div class="zxx_text_overflow_6">你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,kitty救我!</div>
1 css部分: 2 .zxx_text_overflow_6{width:400px;}
1 js部分: 2 var wordLimit=function(){ 3 $(".zxx_text_overflow_6").each(function(){ 4 var copyThis = $(this.cloneNode(true)).hide().css({ 5 ‘position‘: ‘absolute‘, 6 ‘width‘: ‘auto‘, 7 ‘overflow‘: ‘visible‘ 8 }); 9 $(this).after(copyThis); 10 if(copyThis.width()>$(this).width()){ 11 $(this).text($(this).text().substring(0,$(this).html().length-4)); 12 $(this).html($(this).html()+‘...‘); 13 copyThis.remove(); 14 wordLimit(); 15 }else{ 16 copyThis.remove(); //清除复制 17 return; 18 } 19 }); 20 } 21 wordLimit();
前者直接限定字符个数,后者通过宽度判断,去掉最后一个字符,循环,直到文字内容宽度小于div的限制宽度。
标签:
原文地址:http://www.cnblogs.com/jiaweniv/p/4920717.html