關於如何設定css樣式使得文字溢位部分用省略號代替

2021-08-13 04:35:04 字數 617 閱讀 2707

將文字設定為一行,溢位部分用「...」代替。

css樣式:

效果如下:

將文字設定為兩行文字,溢位部分用「...」代替。

css樣式:

效果如下:

display:box;box-flex是css3中的新增的盒模型.

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

常見結合屬性:

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

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

text-overflow: ellipsis;,可以用來多行文字的情況下,用省略號「…」隱藏超出範圍的文字 

css設定文字樣式

載入 img src alt 未載入成功 title 滑鼠放在上提示 文字樣式 行高 line height 文字縮排 text indent 字型大小 font size 字型型別 font family 字型傾斜 font style italic 字型不傾斜 font style normal...

css學習25 設定文字樣式

1 應用基本文字樣式 1.1 對齊文字 對齊屬性 屬性說明 值text align 指定文字塊的對齊方式 start,end,left,right,center,justify text justify 如果text align屬性使用了justify值,則該值會用來指定對齊文字的規則 見下表tex...

CSS樣式 文字樣式

文字擷取 employorganizalistctrl listtext 文字對齊方式 text align justify 文字超出固定高度 顯示滾動條 overflow scroll 顯示邊框 border 1px dashed ff6b6b 虛線 border top style 1px so...