如何在 CSS 中為 Webkit 瀏覽器建立多行省略號？

CSS 中帶省略號的多行文字截斷

需要壓縮冗長的文字同時保持其可讀性是網頁設計中的常見挑戰。 CSS 提供了 text-overflow 屬性來用省略號截斷文本，但這通常適用於單行場景。是否可以在文本的第二行應用省略號？

技術困境

在提供的範例中，所需的效果是省略號出現在第二行。但是，預設行為會截斷第一行的文本，如提供的HTML 標記所示：

<p>I hope someone could help me. I need 
an ellipsis on the second line of...</p>

Webkit 瀏覽器的解決方案

而CSS 則這樣做由於本身不支援多行省略號，因此可以為基於Webkit 的瀏覽器（例如​​Safari 和Chrome）提供解決方法。以下CSS 程式碼片段實現了預期的效果：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

實作

程式碼片段中的CSS 屬性協同工作如下：

• overflow: hide 防止文字溢出指定區域。
• text-overflow: ellipsis 啟動省略號截斷。
• display: -webkit-box 和 -webkit-line-clamp: 3 將可見文字行數限制為三。
• -webkit-box-orient: Vertical 垂直排列文字行。

瀏覽器相容性

需要注意的是，此解決方案僅適用於 Webkit 瀏覽器。其他瀏覽器可能不支援這種方法。然而，它為指定上下文中的多行省略提供了可靠的方法。

以上是如何在 CSS 中為 Webkit 瀏覽器建立多行省略號？的詳細內容。更多資訊請關注PHP中文網其他相關文章！