超長顯示省略號是一個很困擾的事情，各個瀏覽器的對css的解析不同，比如

1. IE可以使用overflow:hidden;white-space:nowrap;text-overflow:ellipsis，

2. Opera中也有相關的支援屬性text-overflow:-o-ellipsis-lastline

3. 新版的chrome中有一個屬性-webkit-line-camp屬性，它允許你指定特定行數省略。-webkit-line-camp：3

以下的指令碼可以直接複製後作為一個新的js檔案引用，在使用的時候可以這樣：dom元素.mlellipsis(最大行數)，這樣改dom元素會在最大行數時擷取並顯示...

但這樣會有個問題就是如果進行響應式開發，當瀏覽器resize時，已經擷取顯示...的文字是沒法再恢復的，所以需要在頁面load時將控制元件的文字儲存，並在resize時取出重新賦值。

以下兩個方法是我用jquery做的用於儲存和恢復內容的，其實相當於是儲存在一個“fulltext”的屬性值裡。

//畫面load的時候呼叫

        function storeText(){
            $("..actTitle a").each(function(){$(this).attr("fulltext",$(this).text());});
        }

//畫面resize時呼叫
        function resetText(){
            $(".actTitle a").each(function(){$(this).text($(this).attr("fulltext"))});
        }

//以下內容可以直接賦值到一個新的js檔案裡，在頁面引用。

; (function () {

    Element.prototype.getText = function () {

        //IE:innerText    FF:textContent

        if (this.innerText == undefined) {
            return this.textContent;
        }
        else {
            return this.innerText;
        }
    };
    Element.prototype.setText = function (str) {
        if (this.innerText == undefined) {
            this.textContent = str || "";
        }
        else {
            this.innerText = str || "";
        }
    };
    Element.prototype.getFinalStyle = function (property, fontSize) {

        var s;

        //IE:currentStyle   FF:getComputedStyle

        if (window.getComputedStyle) {
            s = window.getComputedStyle(this, null)[property];
        }
        else {
            s = this.currentStyle[property];
        }
        if (s.indexOf("px") > 0) {
            s = s.substring(0, s.toString().length - 2);
        }
        if (fontSize != undefined) {
            s = s * fontSize + "px";
        }
        if (s.indexOf("px") > 0) {
            return s.substring(0, s.toString().length - 2);
        }
        else {
            return s;
        }
    };
    Element.prototype.mlellipsis = function (row) {
        var str = this.getText();
        var title = this.getAttribute("title");
        if (title == null) {
            this.setAttribute("title", str);
        }
        else {
            this.setText(title);
        }
        var fontSize = this.getFinalStyle("fontSize");
        if (/msie/i.test(navigator.userAgent)) {
            var lineHeight = this.getFinalStyle("lineHeight");
        }
        else {
            var lineHeight = this.getFinalStyle("lineHeight");
        }
        var height = this.clientHeight;
        if (!height && height == 0) {
            height = this.offsetHeight;
        }
        if (lineHeight == "normal") {
            lineHeight = Number(fontSize * 1.5);
            var nowStyle = this.getAttribute("style") || "";
            this.setAttribute("style", nowStyle + ";line-height:" + lineHeight + "px");
        }
        else {
            lineHeight = Number(lineHeight);
        }
        var dheight = Math.floor(row * lineHeight);
        if (height >= dheight) {
            str = this.getText();
            while (dheight * 3 < this.clientHeight) {
                this.setText(str.substring(0, str.length / 2));
                str = this.getText();
            }
            while (dheight < this.clientHeight) {
                str = this.getText();
                this.setText(str.replace(/(\s)*([a-zA-Z0-9]?|\W)(\.\.\.)?$/, "..."));
            }
        }
    };

})();

說明：本文章參照http://targetkiller.net/mutiple-line-ellipsis/   並對js做了適當修改。