我們如何在具有固定寬度和高度的多行 `` 元素上附加省略號 (...) 來指示截斷？

固定寬度、多行文字溢位的省略號處理

在 Web 開發領域，需要優雅地處理指定容器內的文字溢位寬度和高度。我們如何附加省略號 (...) 來指示多行

上的截斷元素？

可能的解決方案：

jQuery 提供了具有以下標記和CSS 的解決方案：

<code class="html"><div id="fos">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div></code>

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

重複的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>

注意事項：

• 此技術可確保視覺上正確的結果，即使禁用JavaScript。
• 伺服器端截斷可以提高效能。
• 這是一個不完整的解決方案，需要進一步完善以實現實際實現。

示範:

jsFiddle 上提供了現場示範：https://jsfiddle.net/5638d9y0/

其他資源：

• [CSS 靈活盒教學](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
• [Flexbox 簡介](https://developer.mozilla .org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)
• [Flexbox 完整指南](https://www.comw3schools.com /css/css3_flexbox.asp)

以上是我們如何在具有固定寬度和高度的多行 `` 元素上附加省略號 (...) 來指示截斷？的詳細內容。更多資訊請關注PHP中文網其他相關文章！