如何使用 jQuery 修復固定寬度、多行元素中的跨瀏覽器文字溢位？

修復固定寬度、多行元素中的跨瀏覽器文字溢位

考慮一個場景，其中您有一個帶有約束的div寬度和多個文字行。如何確保溢出的文字被省略號 (...) 截斷？

使用jQuery 的多行省略號

雖然各種jQuery 外掛程式可以解決某些文字溢出問題能力，找到一個專門針對您的要求量身定制的產品可能是一項挑戰。以下是使用 jQuery 的基本方法：

var $p = $('#fos p');
var divh = $('#fos').height();
while ($p.outerHeight() > divh) {
    $p.text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}

此腳本迭代地從文本中刪除最後一個單詞，直到高度與 div 匹配。即使禁用 JavaScript，截斷的文字在視覺上仍然保持正確。

伺服器端最佳化

將此方法與伺服器端截斷相結合可以透過保留最小的開銷來增強效能.

注意：此解決方案只是一個起點，可能需要根據您的具體要求進一步細化。

以上是如何使用 jQuery 修復固定寬度、多行元素中的跨瀏覽器文字溢位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！