這次帶給大家在HTML中用CSS實作文字截斷,在HTML中用CSS實作文字截斷的注意事項有哪些,下面就是實戰案例,一起來看一下。
單行文字截斷text-overflow
文字溢出我們常用到的應該就是text-overflow: ellipsis 了,相信大家也很熟悉,只需輕鬆幾行程式碼就可以實現單行文字截斷。
div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
屬性瀏覽器原生支持,各大瀏覽器相容性好,缺點就是只支援單行文字截斷,不支援多行文字截斷。
適用場景:單行文字截斷最簡單實現,效果最好,放心使用。
如果是多行文字截取效果,實作起來就沒有那麼輕鬆。
-webkit-line-clamp 實作
就是透過 -webkit-line-clamp 屬性實作。具體的方式如下:
div { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
它需要和display、-webkit-box-orient 和overflow 結合使用:
display: -webkit-box; 必須結合的屬性,將物件視為彈性伸縮盒子模型顯示。
-webkit-box-orient; 必須結合的屬性,設定或檢索伸縮盒物件的子元素的排列方式
text-overflow: ellipsis; 可選屬性,可以用來多行文字的情況下,用省略號「…」隱藏超出範圍的文字。
從效果來看,它的優點有:
響應式截斷,根據不同寬度做出調整
文字超出範圍才顯示省略號,否則不顯示省略號
瀏覽器原生實現,所以省略號位置顯示剛好
但是缺點也是很直接,因為-webkit-line-clamp 是一個不規範的屬性,它沒有出現在CSS 規範草案中。也就是說只有 webkit 核心的瀏覽器支援這個屬性,像 Firefox, IE 瀏覽器統統都不支援這個屬性,瀏覽器相容性不好。
使用場景:多用於行動裝置頁面,因為行動裝置瀏覽器更多是基於 webkit 內核,除了相容性不好,實現截斷的效果不錯。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關閱讀:
以上是在HTML中用CSS實作文字截斷的詳細內容。更多資訊請關注PHP中文網其他相關文章!