js、css實現文字內容省略

1.經過text-overflow實現

#text_overflow_1 {
        width:200px;
        height: 50px;
        border: 1px solid;
        overflow:hidden; /*超出寬度部分的隱藏*/
        white-space:nowrap; /*文字不換行*/
        text-overflow:ellipsis; /*超出則...代替*/
        -o-text-overflow:ellipsis;  /*opera*/
    }

    <div id="text_overflow_1">
        這是一段測試文字，文章超出寬度時是否會隱藏多餘的文字
    </div>

首先，咱們將它的寬度限制在200px，white-space屬性首先讓文字不換行，而後overflow屬性使其超出div寬度的內容隱藏不顯示。text-overflow:ellipsis這個屬性則能夠實現咱們所要的效果，在文字的後面加上... , 這種方式兼容主流瀏覽器，低版本的火狐可能不支持，須要用其餘的方式去處理，這裏就不說了。

2.經過jQuery限制字符字數的方法實現

function wordLimit(num){
    var maxwidth=num;
    if($(this).text().length>maxwidth){
        $(this).text($(this).text().substring(0,maxwidth));
        $(this).html($(this).html()+'...');
    }
}

這種方式是經過傳最大長度限制顯示的長度，截取字符串以後再最後加上省略號。我的感受這種方式是最簡單的。

3.使用cloneNode複製節點

#text_overflow_3 {
        width:200px;
        height: 50px;
        border: 1px solid;
}

<div id="text_overflow_3">
        這是一段測試文字，文章超出寬度時是否會隱藏多餘的文字
</div>

(function($){
    $.fn.wordLimit = function(num){
        this.each(function(){   
            if(!num){
                var copyThis = $(this.cloneNode(true)).hide().css({
                    'position': 'absolute',
                    'width': 'auto',
                    'overflow': 'visible'
                }); 
                $(this).after(copyThis);
                if(copyThis.width()>$(this).width()){
                    $(this).text($(this).text().substring(0,$(this).text().length-4));
                    $(this).html($(this).html()+'...');
                    copyThis.remove();
                    $(this).wordLimit();
                }else{
                    copyThis.remove(); //清除複製
                    return;
                }   
            }else{
                var maxwidth=num;
                if($(this).text().length>maxwidth){
                    $(this).text($(this).text().substring(0,maxwidth));
                    $(this).html($(this).html()+'...');
                }
            }                    
        });
    }
})(jQuery);

將第二種實現方式和第三種實現方式結合在一塊兒寫個jquery插件，其實就是使用cloneNode去複製一個節點，而後將複製的節點的寬度與當前節點在css中定義的寬度進行比較，循環遍歷，每次長度-4，由於還有3個省略號。當長度相等的時候則中止遍歷。這個方法是在別人的blog上看到的。
其實還有不少的方法能夠去實現，暫時就寫這麼多吧！