css 文字超出隱藏並且顯示省略號

2022-07-27 05:27:12 字數 469 閱讀 4639

單行:

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

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

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

多行需要加如下屬性:

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

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

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

overflow:hidden; 

text-overflow:ellipsis;

display:-webkit-box; 

-webkit-box-orient:vertical;

-webkit-line-clamp:2; 

css 文字超出就隱藏並且顯示省略號

當一行內容的時候 overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行 當有多行內容的時候 overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用...

css 文字超出2行就隱藏並且顯示省略號

首先,要知道css的三條屬性。overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行 這三個是css的基礎屬性,需要記得。但是第三條屬性,只能顯示一行,不能用在這裡,那麼如果顯示多行呢?css3...

css 文字超出2行就隱藏並且顯示省略號

首先,要知道css的三條屬性。overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行 這三個是css的基礎屬性,需要記得。但是第三條屬性,只能顯示一行,不能用在這裡,那麼如果顯示多行呢?css3...