如何在固定容器內實現多行文字溢出的省略號？

固定容器內多行溢出的省略處理

在Web開發中，經常需要在指定寬度和高度的容器內顯示多行文字。但是，當文字超出可用空間時，可能會造成難看的溢出。為了解決這個問題，開發人員經常尋求實作省略號的方法，以表明有更多文字被隱藏。

其中一個場景是文字包含在

中。具有固定寬度和高度的元素。儘管存在各種 jQuery 插件，但找到完美的解決方案可能具有挑戰性。本文探討了一種基本但有效的方法來實現所需的結果。

使用 jQuery 提供了一種方便的方法來操作

的文字內容。元素。我們的目標是迭代刪除最後一個單字，直到文字高度適合指定的容器高度。這是透過利用outerHeight()函數來檢查文字高度是否超過容器高度來完成的，如果是，則使用text()函數截斷文字中的最後一個單字。

確保溢位仍然不可見，我們利用溢位：隱藏；

上的 CSS 屬性元素。這樣，即使 JavaScript 被停用，結果在視覺上看起來也是正確的，沒有省略號。

這是此解決方案的CSS 和jQuery 程式碼：

<code class="css">#fos { width: 300px; height: 190px; overflow: hidden; }
#fos p { padding: 10px; margin: 0; }</code>

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

此方法提供了在固定寬度和高度的容器內透過省略號處理解決多行文字溢位問題的簡單有效的解決方案。透過將 jQuery 與 CSS 結合，即使在停用 JavaScript 的情況下，您也可以實現所需的視覺效果，同時保持可訪問性。

以上是如何在固定容器內實現多行文字溢出的省略號？的詳細內容。更多資訊請關注PHP中文網其他相關文章！