如何優雅地處理文本超出2行顯示省略號 | 技巧分享

在網頁開發中，我們常常需要對文本進行限制，以保證用戶界面的美觀性和良好的用戶體驗。如果文本內容過長，不做處理的話，會讓頁面顯示效果變得非常的雜亂無章。本文將會介紹一些優雅處理文本超出2行顯示省略號的技巧。

一、CSS屬性

第一種處理方式是使用CSS屬性處理。CSS3中的text-overflow屬性，可以將顯示超出文本框的文本省略掉。text-overflow屬性一般結合white-space:nowrap和overflow:hidden一起使用。white-space:nowrap可以防止文本在到達容器結尾時換行，overflow:hidden則使得超出容器的內容被隱藏掉，只顯示省略號。

.text-container {
    width: 300px;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

二、JavaScript方法

第二種處理方式是使用JavaScript來實現。使用JavaScript實現時，需要先計算出文本的高度，如果文本超出兩行，則截取文本並加上省略號。這裡需要用到offsetHeight和scrollHeight這兩個屬性。offsetHeight返回的是元素的像素高度，包含padding和border的高度；scrollHeight返回的是元素的實際內容高度。

function setText(container, text) {
    container.innerHTML = text;
    if(container.offsetHeight > 40) {
        var maxLines = 2;
        var lineHeight = parseInt(getComputedStyle(container).lineHeight);
        var overflowHeight = container.offsetHeight - (lineHeight * maxLines);
        var index = Math.floor((text.length * overflowHeight) / container.scrollHeight);
        container.innerHTML = text.slice(0, index) + '...';
    }
}

三、jQuery插件

第三種方式是使用jQuery插件實現。jQuery插件有很多，其中比較常用的是dotdotdot.js。dotdotdot.js是一個輕量級、基於jQuery的插件，其可以在文本超出預設高度時將文本截取並添加省略號。

$(".text-container").dotdotdot({
    height: 40,
    watch: true
});

四、結論

處理文本超出2行顯示省略號，有多種方法可供選擇。CSS屬性是最簡單、最常用的一種方法，而JavaScript方法適用於動態生成的文本，可以更加靈活地控制文本截取。如果使用jQuery，可以直接使用dotdotdot.js來實現文本截取。不同的處理方式適用於不同的場景，根據實際情況選擇最合適的一種方法即可。