溢出文本显示省略号,兼容常用浏览器

最新推荐文章于 2024-09-19 08:00:00 发布

ironlee

最新推荐文章于 2024-09-19 08:00:00 发布

阅读量3.7k

点赞数

分类专栏：前端技术文章标签：浏览器 firefox function javascript jquery css

前端技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

溢出文本显示省略号,兼容常用浏览器

最近研究css样式，无意中对 "溢出文本显示省略号" 感兴趣，以前我在这个问题上都是用程序写个截取函数来判断，确定要显示多少个字符，多出规定的字符就用省略号("...")代替，虽然这个方法能解决实际问题，但自己总觉得有些不实在。后来在一篇div+css中发现用css样式也可以做到隐藏溢出的文本。就是text-overflow这个样式，text-overflow是一个比较特殊的属性，W3C早前的文档中 是这样定义的：
Name: text-overflow-mode
Value: clip | ellipsis | ellipsis-word
clip : 不显示省略标记（…），而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符
ellipsis-word : 当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个词（word）。

至于我为什么说text-overflow是一个比较特殊的样式呢？因为我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text- overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了（表现上是超出部分显示省略标记…）。

text-overflow: ellipsis属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。

 
    1. 
    P{ 
   
    2. 
    Width: 100%; 
   
    3. 
    text-overflow: ellipsis; 
   
    4. 
    -o-text-overflow: ellipsis; 
   
    5. 
    white-space: nowrap; 
   
    6. 
    overflow:  hidden; 
   
    7. 
    }

浏览器兼容状况：

OH,FML!Firefox不支持这个属性！这回，Firefox你也太另类了吧！还有别的办法么，当然有，方法还挺多的。

1、XUL方式：

首先，我们创建XUL，它应该被保存为ellipsis.xml
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl " xmlns:xbl="http://www.mozilla.org/xbl "
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul ">
<binding id="ellipsis">
  <content>
   <xul:window>
    <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
   </xul:window>
  </content>
</binding>
</bindings>

然后我们需要把这个xml文件放到一个目录，原来的css需要加一条，变成这样

 
    1. 
    p { 
   
    2. 
    white-space: nowrap; 
   
    3. 
    width: 100%;                  /* IE6 需要定义宽度 */ 
   
    4. 
    overflow: hidden;             
   
    5. 
    -o-text-overflow: ellipsis;    /* Opera */ 
   
    6. 
    text-overflow:    ellipsis;    /* IE, Safari (WebKit) */ 
   
    7. 
    -moz-binding: url('ellipsis.xml#ellipsis');    /* Firefox */ 
   
    8. 
    }

虽然Firefox通过XUL的方式实现了ellipsis，但是还是需要注意以下这些问题：
（1）经过XUL处理过的文本你将不能被选中，按理说-moz-user-select: text; 属性将允许文本被选中，但是我没有试验成功。
（2）如果你给父元素绑定了XUL，那么子元素的内容将变得不可见。
例如：源代码为 <p>It is a long<em>haha</em> long long long long text!</p>
结果在firefox浏览器中是看不到haha内容的。

参考资料:
http://www.w3.org/TR/2003/CR-css3-text-20030514/
http://www.quirksmode.org/css/contents.html
https://bugzilla.mozilla.org/show_bug.cgi?id=312156
https://developer.mozilla.org/En/XUL
https://developer.mozilla.org/En/XUL/Description
http://www.rikkertkoppes.com/thoughts/2008/6/
http://www.w3.org/TR/xbl/
http://www.w3.org/TR/css3-text/

2、Javascript方式：

既然XUL无法完美解决Firefox下文字溢出显示…，那么我们就求助javascript吧，当然，并不是古老的截取一定数目的字符来实现。这里以jQuery为例，代码如下：

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

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

 
    1. 
    .overflow { 
   
    2. 
    width:300px; 
   
    3. 
    text-overflow: ellipsis; 
   
    4. 
    -o-text-overflow: ellipsis; 
   
    5. 
    white-space: nowrap; 
   
    6. 
    overflow: hidden; 
   
    7. 
    }

同时还需调用到jquery库，网上下载一个就可以了。

js里有个判断就是当样式里出现text-overflow或者-o-text-overflow的时候，便不会执行这段js。因为支持这两个属性的浏览器可以自己实现ellipsis效果。具体调用如：
<script>
$(document).ready( function() {
$("#partsid").ellipsis(true);
});
</script>
或者
<script>
$(document).ready( function() {
$(".overflow").ellipsis(true);
});
</script>
以上是通过className或者组建id来调用js函数。

这两种方法都可以实现Firefox下ellipsis的效果，如何取舍使用，具体还得根据你要运用到的项目的具体情况来具体分析，XUL实现的方法的不足之处在以上已经很详尽地列举了，如果你可以避免或者说这些无关你项目的大问题，那么XUL不失一个好方法。

原址: http://www.phper.org.cn/?post=103