css如何簡單設定文字溢位盒子顯示省略號

SpongeBobSquarePants 發表於 2021-10-20
CSS

1.單行文字溢位顯示省略號
單行文字溢位顯示省略號,必須滿足三個條件:
(1)先強制一行內顯示文字
white-space:nowrap;(預設 normal自動換行)
(2)超出的部分隱藏
overflow:hidden;
(3)文字用省略號代替超出的部分
text-overflow:ellipsis;

例如:

css如何簡單設定文字溢位盒子顯示省略號

 

 效果如下:

css如何簡單設定文字溢位盒子顯示省略號


2.多行文字溢位顯示省略號
多行文字溢位顯示省略號,有較大的相容性問題,適合於webkit瀏覽器或者移動端(移動端大多是webkit核心)
語法:
overflow:hidden;
text-overflow:ellipsis;
/*彈性伸縮盒子模型顯示*/
display:-webkit-box;
/*限制在一個塊元素顯示的文字的行數*/
-webkit-line-clamp:2;
/*設定或檢索伸縮盒子物件的子元素的排列方式*/
-webkit-box-orient:vertical;

例如:

css如何簡單設定文字溢位盒子顯示省略號

 

 效果如下:

css如何簡單設定文字溢位盒子顯示省略號