div中文字溢位時用 省略代替

2021-09-22 20:14:56 字數 499 閱讀 1556

單行div中文字的溢位

width: 100%;  /*也可以是固定值、min-width這些*/

white-space: nowrap; /*強制文字不能換行*/

overflow: hidden; /*隱藏溢位內容*/

text-overflow: ellipsis;

多行div中文字的溢位

width: 100%;

overflow: hidden;

word-break: break-all; /*允許在單詞內換行,更美觀*/

text-overflow: ellipsis;

display: -webkit-box; /*元素作為box伸縮盒子*/

-webkit-line-clamp: 3; /*設定文字行數限制*/

-webkit-box-orient: vertical; /*設定文字排列方式*/

多行文字溢位用省略號代替

1.單行文字溢位 overflow hidden 溢位隱藏 white space nowrap 讓文字不換行 text overflow ellipsis 溢位的文字用省略號代替2.多文字溢位 display webkit box 物件作為彈性伸縮盒子模型顯示 webkit box orient ...

css實現超出文字溢位用省略號代替

一 單行 實現單行文字的溢位顯示省略號使用text overflow ellipsis屬性,但需要配合使用overflow hidden white space nowrap這兩個屬性使用才能達到效果。注意 如下 overflow hidden text overflow ellipsis whit...

文字超出用省略號代替寫法

預設情況下,當我們給有文字內容的盒子設定固定寬高時,超出會自動換行,如果也超出了高度,會溢位盒子,顯示在外面 1.超出一行就用省略號代替 container2.超出指定行數才隱藏 container 內容長度測試,內容長度測試,內容長度測試,內容長度測試 內容長度測試,內容長度測試,內容長度測試,內...