既是安安

蝴蝶飞不过沧海，谁忍心责怪？

{既是安安}
您的位置：首页 > 既是前端 > 内容溢出用(...)表示的数种方法

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

0 comments 2010-9-1 10:39:26 views

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:308px; float:left; font-size:14px; 
  5.     white-space:nowrap; 
  6.     _text-overflow:ellipsis; 
  7.     overflow:hidden;
  8. }
  9. .dotted{
  10.     float:left;
  11. } 
  12. .dotted:after{
  13.     content:"…";
  14. } 
  15. </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-space: nowrap;
  5.     overflow: hidden;
  6. }

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

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

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

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

既是前端 季氏安安 CSS  HTML  JS  JavaScript  jquery  
很有用但是IE支持不佳的CSS属性Hello! 404

相关文章

0 条留言

我要留言
(必填)
(必填，支持Gravatar)

RSS

  • 分类目录

  • 最近文章

  • 随机文章

  • 最近评论

Powered By Z-Blog. CopyRight © 2010-2012 JSANN.COM. Some Rights Reserved Jsann.
 [Administrator Login] 闽ICP备10017263号