IE8兼容 - 多行文本溢出部分省略

1、id

<p id="cut_str" title="您好, 溫州市鹿城區南浦社區衛計服務中心(330302018) 南浦衛計中心">您好, 溫州市鹿城區南浦社區衛計服務中心(330302018) 南浦衛計中心</p>
<script>
    //js控制文字過多隱藏
    function cutString(str, len) {
        //length屬性讀出來的漢字長度爲1
        if(str.length*2 <= len) {
            return str;
        }
        var strlen = 0;
        var s = "";
        for(var i = 0;i < str.length; i++) {
            s = s + str.charAt(i);
            if (str.charCodeAt(i) > 128) {
                strlen = strlen + 2;
                if(strlen >= len){
                    return s.substring(0,s.length-1) + "...";
                }
            } else {
                strlen = strlen + 1;
                if(strlen >= len){
                    return s.substring(0,s.length-2) + "...";
                }
            }
        }
        return s;
    }
    var str = document.getElementById('cut_str').innerHTML;
    var s=cutString(str,36);//控制顯示文字字符數
    document.getElementById('cut_str').innerHTML=s;
</script>

2、class   ( cutString(str,len)部分代碼與id完全一樣 )

<p class="cut_str" title="您好, 溫州市鹿城區南浦社區衛計服務中心(330302018) 南浦衛計中心">您好, 溫州市鹿城區南浦社區衛計服務中心(330302018) 南浦衛計中心</p>
<p class="cut_str" title="您好, 溫州市鹿城區南浦社區衛計服務中心(330302018) 南浦衛計計中心</p>
//js控制文字過多隱藏
function cutString(str, len) {
    //length屬性讀出來的漢字長度爲1
    if(str.length*2 <= len) {
        return str;
    }
    var strlen = 0;
    var s = "";
    for(var i = 0;i < str.length; i++) {
        s = s + str.charAt(i);
        if (str.charCodeAt(i) > 128) {
            strlen = strlen + 2;
            if(strlen >= len){
                return s.substring(0,s.length-1) + "...";
            }
        } else {
            strlen = strlen + 1;
            if(strlen >= len){
                return s.substring(0,s.length-2) + "...";
            }
        }
    }
    return s;
}
$(".cut_str").each(function(){
    $(this).html(cutString($(this).html(),20));
});

//以下document.getElementsByClassName()方法 IE8不支持!!!!!
var aStr = document.getElementsByClassName('cut_str');
for(var i=0; i<aStr.length; i++){
    var str= aStr[i].innerHTML;
    var s=cutString(str,30);//控制顯示文字字符數
    aStr[i].innerHTML=s;
}

方法二:

不用加css3的相關樣式,直接用jquery

<ul class="box">
    <li><a href="#">人員檔案維護</a></li>
    <li><a href="#">人員調動</a></li>
</ul>

.box li {
    height: 40px;
}
box li a {
    width: 300px;
    line-height: 20px;
}

<script>
    $(".box li").each(function(i){
        var divH = $(this).height();
        var $p = $("a", $(this)).eq(0);
        while ($p.outerHeight() > divH) {
            $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
        };
    });
</script>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章