css超出文字隱藏

2021-08-04 21:24:03 字數 575 閱讀 6911

首先,要知道css的三條屬性。

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

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

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

這三個是css的基礎屬性,需要記得。

但是第三條屬性,只能顯示一行,不能用在這裡,那麼如果顯示多行呢?

css3解決了這個問題,解決方法如下:

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

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

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

最後的css樣式如下:

overflow:hidden; 

text-overflow:ellipsis;

display:-webkit-box; 

-webkit-box-orient:vertical;

-webkit-line-clamp:2; 

CSS溢位文字隱藏

所謂的介面樣式,就是更改一些使用者操作樣式,比如 更改使用者的滑鼠樣式,表單輪廓等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制,因此我們就放棄了。防止表單域拖拽 設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。cursor default 小白 pointer 小手 move 移動...

css設定文字超出範圍隱藏

display block 設定成塊狀元素 white space nowrap 設定段落內文字不換行 overflow hidden 設定內容溢位時,對溢位部分的操作 hidden 隱藏 text overflow ellipsis 文字溢位時,對溢位文字的操作,ellipsis 省略號overf...

css超出文字用省略號表示

css css name html 資料v for遍歷出來的 3 需求是,名字超過3個字,就顯示3個字,多於3個,顯示3個字並且顯示省略號,滑鼠懸浮顯示全部名字,用到了elementui中的tooltip,內容是後台返回,前端遍歷的,就拿到遍歷的值,加上類名就行.省略號的樣式 為 width 50p...