超出部分以省略號展示

2021-08-07 05:03:31 字數 513 閱讀 8154

不做前端很久了,今天從重構師那裡了解到css3已經可以實現很多以往必須通過js才能實現的效果,如漸變,陰影,自動截斷文字展示省略號等等強大效果,而且這些功能日漸成熟,已經大量用於生產環境。h5真的日漸成熟了,得惡補下了。

以下分享實現指定文字超出部分以省略號展示的demo:

>

.text1

.text2

style

>

class

="text1">熱賣精選:從子頻道(服飾鞋包,親子,居家,美妝)檔期裡面挑選出來,庫存大於30%的高信價比商品list,數量為50個div>

/>

class

="text2">熱賣精選:從子頻道(服飾鞋包,親子,居家,美妝)檔期裡面挑選出來,庫存大於30%的高信價比商品list,數量為50個div>

如下圖:

CSS 文字超出部分以省略號結尾

文字只有一行的時候 overflow hidden text overflow ellipsis white space nowrap 指定多行文字的時候 2.1 屬性說明 display webkit box 將物件作為彈性伸縮盒子模型顯示 text overflow ellipsis 溢位部分用...

超出部分省略號

單行省略 overflow hidden text overflow ellipsis white space nowrap 多行省略 display webkit box webkit box orient vertical webkit line clamp 3 overflow hidden ...

css超出部分省略號

本文 如果實現單行文字的溢位顯示省略號同學們應該都知道用text overflow ellipsis屬性來,當然還需要加寬度width屬來相容部分瀏覽。p效果如下 你好 單行省略號測試,省略部分 p效果如下 你好 單行省略號測試,省.略部分呢,測測測測測測測測 試測試測試測試測試試試 因使用了web...