首頁 > web前端 > js教程 > 主體

在HTML中用CSS實作文字截斷

php中世界最好的语言
發布: 2018-03-12 15:44:04
原創
2062 人瀏覽過

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板