pworld 2012-09-26
我想大家在做项目的时候都遇到这样的需求:对于一些列表文本过长溢出显示省略号,我们可以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字符长度为1
function cutStr(str,cutLen){
var returnStr = '', //返回的字符串
reCN = /[^\x00-\xff]/, //双字节字符
strCNLen = str.replace(/[^\x00-\xff]/g,'**').length;
if(cutLen>=strCNLen){
return str;
}
for(var i=0,len=0;len<cutLen;i++){
returnStr += str.charAt(i);
if(reCN.test(str.charAt(i))){
len+=2;
}else{
len++;
}
}
return returnStr;
}
</script>哥偷懒了,没有封装好,还用了个jquery框架,因为已经有插件了—— jQuery ellipsis plugin
方法3:后台控制字符串
我很喜欢这个方法,如果后台的同事们没意见的话。
如果读者还有其他更好的方法,希望能够分享一下,欢迎加入web前端交流群(75701468) 分享您我的经验.