关于文字内容溢出用点点点(...)省略号表示

常规css方法——可以实现IE，Safari，chrome，opera浏览器下文字溢出省略号表示

这是一段测试文字，主要是用来测试文字溢出后是否会用省略号显示。
1 .zxx_text_overflow_1{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}

jQuery限制字符字数的方法

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 });

jQuery自动判断宽度是否超出的方法

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的限制宽度。

posted @ 2015-10-29 15:44  jiaweniv  阅读(593)  评论(0)  编辑  收藏  举报