CSS超出部分省略號

2021-09-28 19:00:55 字數 514 閱讀 2343

1,單行文字實現超出部分省略號

overflow:hidden; //超出的文字隱藏

text-overflow:ellipsis; //溢位用省略號顯示

white-space:nowrap; //溢位不換行

2,多行文字實現超出部分省略號

overflow:hidden; 

text-overflow:ellipsis;

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

-webkit-box-orient:vertical;//從上到下垂直排列子元素(設定伸縮盒子的子元素排列方式)

-webkit-line-clamp:2; //這個屬性不是css的規範屬性,需要組合上面兩個屬性,表示顯示的行數。

注意:如果文字並沒有出現省略號,使用display: block;轉成塊狀元素就可以了

css超出部分省略號

本文 如果實現單行文字的溢位顯示省略號同學們應該都知道用text overflow ellipsis屬性來,當然還需要加寬度width屬來相容部分瀏覽。p效果如下 你好 單行省略號測試,省略部分 p效果如下 你好 單行省略號測試,省.略部分呢,測測測測測測測測 試測試測試測試測試試試 因使用了web...

超出部分省略號

單行省略 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 ...