css超出部分省略號

2021-08-29 03:02:22 字數 814 閱讀 1880

本文**

如果實現單行文字的溢位顯示省略號同學們應該都知道用text-overflow:ellipsis屬性來,當然還需要加寬度width屬來相容部分瀏覽。

p
效果如下

你好:單行省略號測試,省略部分…

p
效果如下:

你好:單行省略號測試,省.

略部分呢,測測測測測測測測

試測試測試測試測試試試…

因使用了webkit的css擴充套件屬性,該方法適用於webkit瀏覽器及移動端;

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

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

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

p

p::after

適用範圍

該方法適用範圍廣,但文字未超出行的情況下也會出現省略號,可結合js優化該方法。

注:將height設定為line-height的整數倍,防止超出的文字露出。

給p::after新增漸變背景可避免文字只顯示一半。

由於ie6-7不顯示content內容,所以要新增標籤相容ie6-7(如:…);相容ie8需要將::after替換成:after。

CSS超出部分省略號

1,單行文字實現超出部分省略號 overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行 2,多行文字實現超出部分省略號 overflow hidden text overflow ellipsi...

超出部分省略號

單行省略 overflow hidden text overflow ellipsis white space nowrap 多行省略 display webkit box webkit box orient vertical webkit line clamp 3 overflow hidden ...

Div裡超出部分,省略號顯示

1.一行顯示並出現省略號 1 三個屬性 1 overflow hidden 2text overflow ellipsis 3white space nowrap 4overflow hidden和white space nowrap都是必須的否則不會顯示省略號 2 網上張大神想出來的margin ...