css超出部分用省略號替代

2021-09-25 23:04:58 字數 359 閱讀 7880

一、單行

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

如下:overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

效果:二、多行

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

css**:

display:-webkit-box;

-webkit-box-orient:vertical;

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

overflow:hidden;

效果:

css 超出部分用省略號顯示

說明 text overflow 用於多行文字的情況下,用省略號 隱藏超出範圍的文字 display webkit box 將物件作為彈性伸縮盒子模型顯示,是必須結合的屬性。webkit box orient 設定或檢索伸縮盒物件的子元素的排列方式,是必須結合的屬性 一 文字顯示一行,超出部分用省略...

用省略號替代文字超出部分

css就能夠處理這樣的需求 單行文字超出 p 很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長 p body html 多行文字超出 很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長 很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長 很長很...

文字超出部分用是省略號顯示

1 文字超出部分用是省略號顯示 text overflow ellipsis overflow hidden white space nowrap whit space屬性 normal 預設。空白會被瀏覽器忽略。pre空白會被瀏覽器保留。其行為方式類似 html 中的標籤。nowrap 文字不會換...