CSS實現多行文字溢位顯示省略號

2021-07-23 18:58:22 字數 588 閱讀 6543

單行文字溢位顯示省略號,可以直接使用

text-overflow:ellipsis; white-space:nowrap;

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

多行文字溢位顯示省略號

方案一 使用webkit屬性-webkit-line-clamp(注意這是乙個不規範的屬性)

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

方案二 通過::after偽類新增省略號(相容性較好)

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

另外,也可以通過一些js的方式解決,這裡不做闡述

css實現多行文字溢位顯示省略號

webkit瀏覽器或移動端的頁面 在webkit瀏覽器或移動端 絕大部分是webkit核心的瀏覽器 的頁面實現比較簡單,可以直接使用webkit的css擴充套件屬性 webkit是私有屬性 webkit line clamp 注意 這是乙個 不規範的屬性 unsupported webkit pro...

css多行文字溢位顯示省略號

overflow hidden text overflow ellipsis white space nowrap 移動端頁面 overflow hidden text overflow ellipsis display webkit box 必須結合的屬性 將物件作為彈性伸縮盒子模型顯示 webk...

CSS實現單行 多行文字溢位顯示省略號( )

如果實現單行文字的溢位顯示省略號同學們應該都知道用text overflow ellipsis屬性來,當然還需要加寬度width屬來相容部分瀏覽。實現方法 overflow hidden text overflow ellipsis white space nowrap 效果如圖 但是這個屬性只支援...