在HTML中用CSS實作文字截斷

這次帶給大家在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中文網其它相關文章！

相關閱讀：

js-xlsx的工具類別庫xlsxUtils的使用詳解

##JS的日常常用函數整合
#

以上是在HTML中用CSS實作文字截斷的詳細內容。更多資訊請關注PHP中文網其他相關文章！