text-overflow:ellipsis溢出显示省略号兼容所有浏览器的解决办法

我想大家在做项目的时候都遇到这样的需求：对于一些列表文本过长溢出显示省略号，我们可以text-overflow:ellipsis很简单地达到效果，很遗憾不能兼容火狐浏览器。

text-overflow被列入了CSS3属性，火狐对于标准的实现一向都很好，很郁闷为什么没有实现这个(FireFox 7.0貌似已经实现了)。

有三种办法可以实现：

方法1：用css实现 text-overflow:ellipsis

HTML代码：

<h3>用CSS解决</h3><ul class="ellipsis"><li><a href="##" title="text-overflow:ellipsis引起兼容性问题解决办法">text-overflow:ellipsis引起兼容性问题解决办法</a></li><li><a href="##" title="text-overflow:ellipsis引起兼容性问题解决办法">text-overflow:ellipsis引起兼容性问题解决办法</a></li><li><a href="##" title="text-overflow:ellipsis引起兼容性问题解决办法">text-overflow:ellipsis引起兼容性问题解决办法</a></li><li><a href="##" title="text-overflow:ellipsis引起兼容性问题解决办法">text-overflow:ellipsis引起兼容性问题解决办法</a></li><li><a href="##" title="text-overflow:ellipsis引起兼容性问题解决办法">text-overflow:ellipsis引起兼容性问题解决办法</a></li></ul>

CSS代码：

.ellipsis li{-moz-binding: url('ellipsis.xml#ellipsis');/*相对当前html的路径*/overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:200px;}

你可能也注意到了，兼容火狐浏览器的关键代码 -moz-binding: url('ellipsis.xml#ellipsis'); 就是加载了一个XML文件。

ellipsis.xml代码：

<?xml version="1.0" encoding="utf-8"?><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:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description></content></binding></bindings>

不要问我为什么，这些是浏览器的bug，我想不必深究。了解的大神们也可以科普一下。

方法2：用js截取字符串

实现代码：

<h3>用JS截取字符串</h3><ul class="list"><li><a href="##" title="text-overflow:ellipsis引起兼容性问题解决办法">text-overflow:ellipsis引起兼容性问题解决办法</a></li><li><a href="##" title="text-overflow:ellipsis引起兼容性问题解决办法">text-overflow:ellipsis引起兼容性问题解决办法</a></li><li><a href="##" title="text-overflow:ellipsis引起兼容性问题解决办法">text-overflow:ellipsis引起兼容性问题解决办法</a></li><li><a href="##" title="text-overflow:ellipsis引起兼容性问题解决办法">text-overflow:ellipsis引起兼容性问题解决办法</a></li><li><a href="##" title="text-overflow:ellipsis引起兼容性问题解决办法">text-overflow:ellipsis引起兼容性问题解决办法</a></li></ul><script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script><script type="text/javascript">$(function (){var list = $(".list li a");list.each(function(index, element) {var str = $(this).text();$(this).text(cutStr(str,34)+'...');});});//截取中英字符串 双字节字符长度为2 ASCLL字符长度为1function cutStr(str,cutLen){var retuStr = '',//返回的字符串reCN = /[^\x00-\xff]/,//双字节字符strCNLen = str.replace(/[^\x00-\xff]/g,'**').length; if(cutLen>=strCNLen){retu str;}for(var i=0,len=0;len<cutLen;i++){retuStr += str.charAt(i);if(reCN.test(str.charAt(i))){len+=2;}else{len++;}}retu retuStr;}</script>

哥偷懒了，没有封装好，还用了个jquery框架，因为已经有插件了—— jQuery ellipsis plugin 

方法3：后台控制字符串

我很喜欢这个方法，如果后台的同事们没意见的话。

文章正文已结束，感谢阅读。如果本文对您有所帮助，请点击推荐一下。

如果对本文有何建议或疑问请留言或加群讨论，前端开发交流群(75701468)

文章属于原创，如需转载请注明文章来源，不胜感激。

文章地址：http://www.cnblogs.com/leolai/archive/2012/09/19/2694003.html

蜂众网,广州蜂众网,瀑布流