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字符長度為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：后台控制字符串

我很喜歡這個方法，如果后台的同事們沒意見的話。

文章正文已結束，感謝閱讀。如果本文對您有所幫助，請點擊推薦一下。

如果對本文有何建議或疑問請留言或加群討論，前端開發交流群(75701468)

文章屬於原創，如需轉載請注明文章來源，不勝感激。

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

蜂眾網,廣州蜂眾網,瀑布流