css實現超出文字溢位用省略號代替

2022-08-04 21:09:17 字數 504 閱讀 2886

一、單行

實現單行文字的溢位顯示省略號使用text-overflow:ellipsis屬性,但需要配合使用overflow: hidden; white-space: nowrap這兩個屬性使用才能達到效果。

注意:如下:

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

效果:二、多行

不考慮相容性,適用於webkit瀏覽器核心

css**:

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-box-clamp:3 //擷取第三行

overflow:hidden;

效果:

css超出文字用省略號表示

css css name html 資料v for遍歷出來的 3 需求是,名字超過3個字,就顯示3個字,多於3個,顯示3個字並且顯示省略號,滑鼠懸浮顯示全部名字,用到了elementui中的tooltip,內容是後台返回,前端遍歷的,就拿到遍歷的值,加上類名就行.省略號的樣式 為 width 50p...

超出文字用省略號表示

1 單行文字 幸福像花兒一樣,我的快樂我做主。臨淵羡魚不如退而結網。你要相信,生活對每乙個人都是公平的,不要灰心不要喪氣。youcan!幸福像花兒一樣,我的快樂我做主。臨淵羡魚不如退而結網。你要相信,生活對每乙個人都是公平的,不要灰心不要喪氣。youcan!幸福像花兒一樣,我的快樂我做主。臨淵羡魚不...

CSS 文字超出溢位顯示省略號

原始碼 因使用了webkit的css擴充套件屬性,該方法適用於webkit瀏覽器及移動端 注 webkit line clamp用來限制在乙個塊元素顯示的文字的行數。為了實現該效果,它需要組合其他的webkit屬性。常見結合屬性 display webkit box 必須結合的屬性 將物件作為彈性伸...