既是安安

蝴蝶飞不过沧海,谁忍心责怪?

内容溢出用(...)表示的数种方法

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

 
  1. .text_overflow_1{
  2.     width:27em;     white-space:nowrap;
  3.     text-overflow:ellipsis;
  4.     -o-text-overflow:ellipsis;
  5.     overflow:hidden;
  6. }

2.使用ellipsis.xml文件使Firefox支持文字溢出后点点点省略号表示

 
  1. .text_overflow_2{
  2.     width:27em;     white-space:nowrap;
  3.     text-overflow:ellipsis;
  4.     -o-text-overflow:ellipsis;
  5.     -moz-binding:url('../xml/ellipsis.xml#ellipsis');
  6.     overflow:hidden;
  7. }

ps: 在Firefox下上面div文字溢出省略号显示,此div内容是“这段代码调用了同文件夹路径的ellipsis.xml文件,看Firefox浏览器下是够文字溢出省略号表示”。至此,几乎所有主流浏览器都实现文字溢出省略号表示。

 
  1. .text_overflow_3{
  2.     width:27em;
  3.     white-space:nowrap;
  4.     text-overflow:ellipsis;
  5.     -o-text-overflow:ellipsis;
  6.     -moz-binding:url('ellipsis.xml#ellipsis');
  7.     overflow:hidden;
  8. }

这里有个小结论:这个使Firefox浏览器下文字溢出省略号表示的ellipsis.xml文件要在页面的同一目录下,或是下一级目录下(我已测试),要是向上跨文件夹访问或绝对路径访问则失效。原因不详!

提供ellipsis.xml的源码(当然你也可以点击这里进行下载[使用 右键 另存为 的方式]):

 
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <bindings
  3.   xmlns="http://www.mozilla.org/xbl"
  4.   xmlns:xbl="http://www.mozilla.org/xbl"
  5.   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  6. >
  7.   <binding id="ellipsis">
  8.     <content>
  9.       <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
  10.     </content>
  11.   </binding>
  12. </bindings>

虽然Firefox通过XUL的方式实现了ellipsis,但是还是需要注意以下这些问题:
1.经过XUL处理过的文本你将不能被选中,按理说-moz-user-select: text; 属性将允许文本被选中,但是我没有试验成功。
2.如果你给父元素绑定了XUL,那么子元素的内容将变得不可见。

XUL是英文“XML User Interface Language”的首字母缩写。它是为了支持Mozilla系列的应用程序(如Mozilla Firefox和Mozilla Thunderbird)而开发的使用者界面标示语言。顾名思义,它是一种应用XML来描述使用者界面的标示语言。(百度百科

3.使用:after伪类和content实现文字溢出后省略号表示

这个方法流传已久,经过多次测试都不能完全兼容ie6/7/8/ff/Safari,chrome,opera;在Safari,chrome这两个浏览器下表现为省略号重复出现一次(即为6个),其他浏览器下为正常的3个,这里只要稍作改动即可兼容以上各浏览器,把text-overflow:ellipsis; 改为_text-overflow:ellipsis; 即可。用此方法多了一个空的标签。

 
  1. css部分:
  2. <style> 
  3. .box{
  4.     width:308pxfloat:leftfont-size:14px
  5.     white-space:nowrap
  6.     _text-overflow:ellipsis; 
  7.     overflow:hidden;
  8. }
  9. .dotted{
  10.     float:left;
  11. .dotted:after{
  12.     content:"…";
  13. </style>

4.margin负值定位法

 
  1. HTML部分:<div class="text_overflow_4">
  2.     <div class="text_con">这是一段比较长的文字,用来测试是否文字溢出时会用省略号显示。</div> 
  3.     <div class="text_dotted">…</div>
  4. </div>
  5. CSS部分:
  6. .text_overflow_4{
  7.     width:24em
  8.     height:1.3em;
  9.      overflow:hidden
  10.     zoom:1;
  11. }
  12. .text_overflow_4 .text_con{
  13.     float:left;
  14.     height:1.3em
  15.     margin-right:3em
  16.     overflow:hidden;
  17. }
  18. .text_overflow_4 .text_dotted{
  19.     width:3em
  20.     height:1.31em
  21.     float:right
  22.     margin-top:-1.3em;
  23. }

简要说明:

此方法兼容IE6,IE7(IE8未测过),Firefox,chrome,Safari,opera浏览器。没有hack,没有生僻的css样式。文字短时,没有省略号,文字溢出时就出现省略号。可以说是相当不错的一个方法。原理也很简单:当文字内容足够长时就把隐藏在上面的省略号层给挤下来了。关键就是点点点所在div层的高度的绝对值要比其margin的绝对值大那么一点点。

5.jQuery限制字符字数的方法

 
  1. HTML部分:
  2. <div class="text_overflow_5">你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊!</div>
  3. 没有css啦,只有js代码:
  4. $(document).ready(function(){
  5.     //限制字符个数
  6.     $(".text_overflow_5").each(function(){
  7.         var maxwidth=23;
  8.         if($(this).text().length>maxwidth){ 
  9.            $(this).text($(this).text().substring(0,maxwidth));
  10.             $(this).html($(this).html()+'…');
  11.         }
  12.     });
  13. });

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

 
  1. HTML部分:
  2. <div class="text_overflow_6">你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,kitty救我!</div>
  3. css部分:
  4. .text_overflow_6{width:400px;}
  5. js部分:
  6. var wordLimit=function(){
  7.     $(".text_overflow_6").each(function(){
  8.         var copyThis = $(this.cloneNode(true)).hide().css({
  9.             'position''absolute',
  10.             'width''auto',
  11.             'overflow''visible' 
  12.        });
  13.         $(this).after(copyThis);
  14.         if(copyThis.width()>$(this).width()){
  15.             $(this).text($(this).text().substring(0,$(this).html().length-4));
  16.             $(this).html($(this).html()+'…');
  17.             copyThis.remove();
  18.             wordLimit();
  19.         }else{
  20.             copyThis.remove(); //清除复制
  21.             return;
  22.         }
  23.     });
  24. }wordLimit();

前者直接限定字符个数,后者通过宽度判断,去掉最后一个字符,循环,直到文字内容宽度小于div的限制宽度。

7.jQuery.ellipsis插件

插件的源码如下(同样的,你可以点击这里下载[同样是 右键 另存为]):

 
  1. (function($) {
  2.     $.fn.ellipsis = function(enableUpdating){
  3.         var s = document.documentElement.style;
  4.         if (!('textOverflow' in s || 'OTextOverflow' in s)) {
  5.             return this.each(function(){
  6.                 var el = $(this);
  7.                 if(el.css("overflow") == "hidden"){
  8.                     var originalText = el.html();
  9.                     var w = el.width();
  10.  
  11.                     var t = $(this.cloneNode(true)).hide().css({
  12.                         'position''absolute',
  13.                         'width''auto',
  14.                         'overflow''visible',
  15.                         'max-width''inherit'
  16.                     });
  17.                     el.after(t);
  18.  
  19.                     var text = originalText;
  20.                     while(text.length > 0 && t.width() > el.width()){
  21.                         text = text.substr(0, text.length - 1);
  22.                         t.html(text + "…");
  23.                     }
  24.                     el.html(t.html());
  25.  
  26.                     t.remove();
  27.  
  28.                     if(enableUpdating == true){
  29.                         var oldW = el.width();
  30.                         setInterval(function(){
  31.                             if(el.width() != oldW){
  32.                                 oldW = el.width();
  33.                                 el.html(originalText);
  34.                                 el.ellipsis();
  35.                             }
  36.                         }, 200);
  37.                     }
  38.                 }
  39.             });
  40.         } else return this;
  41.     };
  42. })(jQuery);

这段js的原理很简单,就是通过不断的比较宽度值,然后逐个缩短字符宽度,当最后宽度合适的时候,停止循环,就实现了文字溢出显示…的效果。
这段js还需要一段css来配合。

 
  1. .overflow {
  2.     text-overflow: ellipsis;
  3.     -o-text-overflow: ellipsis;
  4.     white-spacenowrap;
  5.     overflowhidden;
  6. }

js里有个判断就是当样式里出现text-overflow或者-o-text-overflow的时候,便不会执行这段js。因为支持这两个属性的浏览器可以自己实现ellipsis效果。

[既是安安]博客 季氏安安

本文作者:季氏安安[既是安安]博客采用 BY-NC-SA 协议进行授权. 转载请保留此链接,谢谢。)

原文链接:http://www.jsann.com/post/fand_text_overflow.html

网站分类
Tags列表
最近发表
最新留言
友情链接
站点统计

Top