多行文字省略號：純 CSS 可行嗎？

多行文字省略號：可能嗎？

使用省略號 (...) 截斷溢位文字的能力是一種常見的 CSS 要求。但是，標準文字溢出屬性僅適用於單行。這就提出了一個問題：我們能否在多行上複製此行為，允許文字根據需要換行？

答案是肯定的。透過專為此目的設計的 CSS 屬性，無需借助 JavaScript 即可實現所需的效果。例如：

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

此程式碼將建立一個 div，最多顯示三行文本，其餘文本將替換為省略號。透過調整 -webkit-line-clamp 屬性，您可以控制顯示的最大行數。

請記住，此技術目前僅適用於基於 WebKit 的瀏覽器，例如 Safari 和 Chrome。如果您需要跨瀏覽器相容性，您可以考慮使用 polyfill 或更複雜的 JavaScript 解決方案。

以上是多行文字省略號：純 CSS 可行嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！