css多行省略號和單行省略號

2022-02-28 08:34:47 字數 2614 閱讀 1226

單行溢位,超出部分顯示...或者擷取。前提必須有寬度

陌生人,我也為你祝福

願你有乙個燦爛的前程

願你有情人終成眷屬

願你在塵世獲得幸福

我只願面朝大海,春暖花開

div>

body

>

html

>

陌生人,我也為你祝福

願你有乙個燦爛的前程

願你有情人終成眷屬

願你在塵世獲得幸福

我只願面朝大海,春暖花開

div>

body

>

html

>

適用範圍:

因使用了webkit的css擴充套件屬性,該方法適用於webkit瀏覽器及移動端;

注:1.-webkit-line-clamp用來限制在乙個塊元素顯示的文字的行數。 為了實現該效果,它需要組合其他的webkit屬性。常見結合屬性:

2.display: -webkit-box; 必須結合的屬性 ,將物件作為彈性伸縮盒子模型顯示 。

3.-webkit-box-orient 必須結合的屬性 ,設定或檢索伸縮盒物件的子元素的排列方式;

陌生人,我也為你祝福

願你有乙個燦爛的前程

願你有情人終成眷屬

願你在塵世獲得幸福

我只願面朝大海,春暖花開

div>

body

>

html

>

css 文字超出省略號,單行省略號和多行省略號

doctype html en utf 8 viewport content width device width,initial scale 1.0 document title html,body width 1000px padding 50px 30px margin 50px auto b...

文字單行省略號 多行出現省略號

第一種僅支援單行省略 width value overflow hidden text overflow ellipsis white space nowrap 第二種支援多行省略 width value overflow hidden text overflow ellipsis display ...

css 超出兩行省略號,超出一行省略號

參考 超出一行省略 p 超出2行省略 p 注 兩行注釋必須要!因為 webpack打包後 webkit box orient會被移除,autoprefixer會自動移除老式過時的 所以需要新增注釋關閉autoprefixer。如果有清除注釋的外掛程式,將該外掛程式設為false,否則不生效。auto...