CSS學習--文字溢位
阿新 • • 發佈：2022-03-31
文字溢位
預設值
overflow: visible;
溢位時隱藏
overflow: hidden;
溢位時顯示滾動
overflow: auto;
顯示滾動條
/* x,y軸都可滾動 */
overflow: scroll;
/* 僅x軸滾動 */
overflow: scroll hidden;
/* 僅x軸滾動 */
overflow-x: scroll;
/* 僅y軸滾動 */
overflow-y: scroll;
處理長英文單詞
word-break: normal | break-all | keep-all | break-word;
| 值 | 描述 |
|---|---|
| normal | 預設斷行 |
| break-all | 截斷單詞，根據寬度自適應從哪裡截斷 |
| keep-all | CJK不斷行，其他同normal |
| break-word | 截斷超出行寬的單詞 |
CJK: 中/日/韓文
換行
overflow-wrap: normal | break-word;
| 值 | 描述 |
|---|---|
| normal | 行內容下的最後一個單詞的空格斷開（可以超出行寬） |
| break-word | 根據行寬截斷超出行寬的單詞 |
單行文字溢位
overflow: hidden; /* 隱藏超出部分 */ white-space: nowrap; /* 超出的文字保持在一行 */ text-overflow: ellipsis; /* 截斷文字處顯示省略號 */
多行文字溢位(-webkit-)
display: -webkit-box; /* 將物件作為彈性伸縮盒子模型顯示 */
-webkit-box-orient: vertical; /* 設定或檢索伸縮盒物件的子元素的排列方式 */
-webkit-line-clamp: 2; /* 限制在一個塊元素顯示的文字的行數 */
overflow: hidden;