css控制文字,超出部分顯示省略號

2021-10-06 06:37:46 字數 516 閱讀 7078

單行文字溢位

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

多行文字溢位

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

適用範圍

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

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

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

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

CSS控制文字,超出部分顯示省略號

pstyle width 300px overflow hidden white space nowrap text overflow ellipsis 如果實現單行文字的溢位顯示省略號同學們應該都知道用text overflow ellipsis屬性來,當然還需要加寬度width屬來相容部分瀏覽。...

CSS控制文字,超出部分顯示省略號

pstyle width 300px overflow hidden white space nowrap text overflow ellipsis 如果實現單行文字的溢位顯示省略號同學們應該都知道用text overflow ellipsis屬性來,當然還需要加寬度width屬來相容部分瀏覽。...

CSS控制文字,超出部分顯示省略號

pstyle width 300px overflow hidden white space nowrap text overflow ellipsis 如果實現單行文字的溢位顯示省略號同學們應該都知道用text overflow ellipsis屬性來,當然還需要加寬度width屬來相容部分瀏覽。...