码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-10-29 16:17:02      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:

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

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

标签:

原文地址:http://www.cnblogs.com/jiaweniv/p/4920717.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!