css控制文字超出省略

2021-10-19 18:50:31 字數 726 閱讀 9539

單行文字操作省略

/**

思路:1.設定inline-block屬相

2.強制不換行

3.固定高度

4.隱藏超出部分

5.顯示「……」

*/display

: inline-block;

white-space

: nowrap;

width

: 100%;

overflow

: hidden;

text-overflow

:ellipsis;

多行文字超出省略

/**

思路: 1.超出的文字隱藏

2.溢位用省略號顯示

3.溢位不換行

4.將物件作為彈性伸縮盒子模型顯示

5.從上到下垂直排列子元素(設定伸縮盒子的子元素排列方式)

6.這個屬性不是css的規範屬性,需要組合上面兩個屬性,表示顯示的行數

*/width:

200px;

word-

break

:break

-all;

display:

-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

overflow:hidden;

文字超出省略 遮罩層

文字超時顯示 overflow hidden text overflow ellipsis white space nowrap 多行內容的時候 overflow hidden text overflow ellipsis display webkit box webkit box orient v...

文字超出省略隱藏及文字換行

div 要知道css的三條基礎屬性,只能顯示一行。屬性描述 overflow hidden 超出的文字隱藏。text overflow ellipsis 溢位用省略號顯示。white space nowrap 溢位不換行。css3屬性,顯示多行。屬性描述 display webkit box 將物件...

文字超出省略號型別

overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行overflow hidden text overflow ellipsis display webkit box 作為彈性伸縮盒子模型顯示...