---
tags: CSS大全
---

文字斷行
overflow-wrap (word-wrap) / word-break / white-space / hyphens
===

瀏覽器默認
---
- 句子太長，導致單詞放不下，瀏覽器將單詞挪至下一行
- 假若單詞太長，容器無法容納，由於默認單詞不能斷行，因此直接超出容器

overflow-wrap 單詞溢出時，是否允許瀏覽器在單詞內進行斷句
---
> 別名：word-wrap
> word-wrap 原本屬於微軟的私有屬性，在 CSS3 的文本規範草案中重名為 overflow-wrap，被其他瀏覽器所支援
- normal 預設，單詞太長導致溢出時，任其溢出，也不能將單詞斷行
- break-word 單詞太長導致溢出時，直接斷行

word-break 怎麼進行單詞內的斷句
---
- normal 預設，英文以單詞 (空格) 斷行，不會將單詞切斷，中文以字斷行
- break-all 以字，任意斷行
- keep-all 以單詞 (空格) 斷行，不會將單詞切斷

white-space 如何處理空白字元
---

| | normal | nowrap | pre | pre-wrap | pre-line |
| -------- | -------- | -------- | -------- |-------- |-------- |
| 空白字元合併 | YES | YES | NO |NO | YES |
| 溢出容器換行 | YES | NO | NO |YES | YES |
| 換行字元換行 <br> 保留原始內容 | NO | NO | YES |YES | YES |

- normal 默認；連續的空白字元，合併為一個空白字元；溢出容器換行
- nowrap 不換行

以下為保留原始內容，只是有部分細節不同
- pre 完全保留原始內容，效果等同 `<pre>`
- pre-wrap 溢出容器換行
- pre-line 溢出容器換行；連續的空白字元，合併為一個空白字元

[hyphens 連字符](https://codepen.io/betty-hu/pen/powNZGd?editors=1100)
---
斷行時如何使用連字符 -

> 換行機會：
> - 硬連字符 `-`
> - 軟連字符 `&shy;` 不可見（斷行呈現連字符），標示瀏覽器斷行位置

- none
- 只會在空白處斷行，軟連字符無效
- manual
- 默認，只有在換行機會時才會斷行
- auto
- 依照瀏覽器規則，在溢出時斷行並插入連字符，斷行位置取決於 `lang="en"` 文本語系