css實現單行,多行文字溢位顯示省略號

2022-03-04 23:26:32 字數 982 閱讀 3249

1.單行文字溢位顯示省略號我們可以直接用text-overflow: ellipsis

實現方法:

<

style

>

.div_text

style

>

<

div

class

="div_text"

>

單行文字溢位顯示省略號,單行文字溢位顯示省略號

div>

效果如圖:

2.多行文字溢位,我們可以使用webkit的css擴充套件屬性,該方法適用於webkit瀏覽器及移動端

實現方法:

<

style

>

.div_moreline

style

>

<

div

class

="div_moreline"

>

多行文字溢位,我們可以使用webkit的css擴充套件屬性,該方法適用於webkit瀏覽器及移動端。多行文字溢位,我們可以使用webkit的css擴充套件屬性,該方法適用於webkit瀏覽器及移動端。

div>

/*display:-webkit-box;將物件作為彈性伸縮盒子模型顯示 

-webkit-box-orient:vertical;設定或檢索伸縮盒物件的子元素的排列方式 。

-webkit-line-clamp:3;設定顯示多少行

*/

效果如圖:

css實現單行(多行)文字溢位顯示

overflow hidden text overflow ellipsis white space nowrap 當然還需要加寬度width屬來相容部分瀏覽。以上為單行文字溢位 以下為多行文字溢位 display webkit box webkit box orient vertical webk...

CSS實現單行 多行文字溢位顯示 的總結

效果圖如下 實現方法 overflow hidden text overflow ellipsis white space nowrap 還需要加寬度width屬來相容部分瀏覽。效果圖如下 實現方法 display webkit box webkit box orient vertical webk...

css 實現單行 多行文字顯示

1.單行顯示文字,超出顯示省略號,很容易實現 需要加寬度width屬來相容部分瀏覽 width 200px overflow hidden text overflow ellipsis white space nowrap 2.多行文字顯示,限制行數,超出顯示省略號,如下實現 width 200px...