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

2021-10-11 17:48:46 字數 670 閱讀 6803

overflow:hidden; /*超出的部分隱藏起來*/ 

text-overflow:ellipsis;/*超出文字以省略號 */

white-space:nowrap;/*不換行*/

overflow: hidden; /*超出的部分隱藏起來*/ 

text-overflow: ellipsis;/*超出文字以省略號 */

display: -webkit-box;

-webkit-line-clamp: 2; /*用來限制在乙個塊元素顯示的文字的行數 */

-webkit-box-orient: vertical; /*從頂部向底部垂直布置子元素 */

注意:-webkit-line-clamp是webkit的私有屬性,是乙個 不規範的屬性(unsupported webkit property),它沒有出現在 css 規範草案中。

-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屬來相容部分瀏覽。...