css 多行溢位顯示省略號

2022-01-31 12:17:05 字數 367 閱讀 1060

記錄下看到的乙個css巧用,非常 有意思。

1 常規的處理方法

張燈結綵龍獅鬧,團圓歡樂一家好,家庭事業火紅照,

友情親情繞,平安健康都來到,真情滋潤好運交,元宵節的吉祥一路拋,灑下前程更

2 利用偽元素巧妙解決
張燈結綵龍獅鬧,團圓歡樂一家好,家庭事業火紅照,

友情親情繞,平安健康都來到,真情滋潤好運交,元宵節的吉祥一路拋,灑下前程更

總結:沒有溢位的時候,before偽元素一直在文字模組的右下角,但是上面蓋著 after 偽元素,所以視覺上看不到省略號。當文字溢位的時候,遮蓋省略號的 after 元素就會被擠下去。這時候before元素就露出來了。

多行溢位顯示省略號( )

單行溢位顯示省略號 多行溢位顯示省略號 這裡也順便寫一下單行溢位。作為簡單複習吧 overflow hidden text overflow ellipsis white space nowrap width 100px 多行溢位。如果是移動端的話。可以這樣寫 display webkit box ...

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

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

CSS 多行溢位省略號

參考文件 部落格 webkit line clamp display box布局的詳細介紹 webkit line clamp 限制在乙個塊元素顯示的文字的行數。是乙個不規範的屬性,它沒有出現在 css 規範草案中。為了實現限制行數,它需要組合其他外來的webkit屬性一起使用 將物件作為彈性伸縮盒...