單行文本溢出和多行文本溢出顯示省略號

對於單行文本溢出，css 代碼以下：

.test{
    width: value;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

'value' 爲想要設置的寬度，對於多文本溢出，須要用到 js，代碼以下：

textOverflow('.test')
function textOverflow(obj){
    var oH, oText;
    oH    = $(obj).height();
    oText = $(obj).children();
    if (oText.outerHeight() > oH) {
        while (oText.outerHeight() > oH) {
            oText.html(oText.html().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
        }
        var text = oText.html();
        if (text.substring(text.length-3) != '...') {
            if (text.substring(text.length-4) == '<br>') {
                oText.html(text.replace(/<br>$/, "..."));
            }else {
                oText.html(text + '...')
            }                   
        }       
    }
}

對於上面的 js 代碼，只要先設置 test 的寬高就行。js 代碼中後面判斷文本最後面3個字符是否是省略號(爲了防止文本是經過多個 br 標籤換行，而不會出現省略號)，可是它限制了 html 的佈局，大體佈局以下：

<div class="test">
    <div>
       <!--  文本內容 -->
    </div>  
</div>

test 裏面那個 div 標籤能夠換成 p、span、a、code 等等標籤(樓主只試了這幾個)，可是 test 裏面須要有隻能有一個子元素，否則獲取的 oText 不是文本內容。

若是小夥伴們有什麼更好的辦法來亮瞎樓主的那個什麼眼，歡迎在評論中留言。