如何在多行文字中實現固定寬度和高度的省略號？

多行文字中固定寬度和高度的省略號

可以在固定寬度和範圍內實現帶省略號的多行文字溢位使用JavaScript 的高度容器。要理解這個概念，請想像一個具有預定義尺寸的 div，其中包含多行文字。

目標是確保文字在指定行處被截斷並附加省略號以指示連續。實作方式如下：

1. Overflow 屬性： 將 div 的溢出屬性設為“隱藏”，以防止文字溢出其邊界。
2. 行高和最大高度：指定div的行高和最大高度，以限制它可以容納的行數。
3. 文字截斷：使用jQuery 重複刪除文字的最後一個單詞，直到它適合所需的大小。以下是一個範例：

<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>

4. 伺服器端截斷： 結合伺服器端截斷以提高效能，並在停用JavaScript 時呈現清晰的文本，無需省略號。

這種方法為固定範圍內省略號的文字溢位提供了基本的解決方案。為了更全面的實現，請考慮實現伺服器端截斷或使用提供增強文字截斷功能的 jQuery 插件。

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