省略號的多行文字溢位
在 CSS 中,text-overflow 屬性允許在超出指定區域時截斷文字。但是,預設情況下,此截斷發生在單行上。有時,希望允許文字在多行上換行,同時仍表明還有更多內容可以看到。
使用省略號實現多行溢位
要實現此效果,我們可以利用下列CSS屬性:
-
顯示: -webkit-box;:此屬性建立一個可以容納多行的靈活容器。
-
-webkit-line-clamp: 3;:表示允許的最大行數在省略號出現之前(例如,三行設定為3
-
-webkit-box-orient: 垂直;:確保行在容器內垂直堆疊。 >:在最後一個可見行的末尾加上省略號(...)。中的文字就可以了。 🎜> 這些屬性僅受基於WebKit 的支援瀏覽器,包括Chrome 和Safari。
以上是CSS中如何用省略號實現多行文字溢出?的詳細內容。更多資訊請關注PHP中文網其他相關文章!