# CSS斷行

- 統一的文字(html)

<div class="txt">
    好難分辨white-space word-break word-wrap的差別         sooo hard
    「人生中有些我們很在乎的事情，其實一點價值都沒有。」
    ABCDE beautiful antidisestablishmentarianism 123456789   hello           wow
</div>

- 父層CSS

.txt {
    width: 200px;
    border: 1px #888 solid;
    margin: 10px;
}

## word-break

### normal
::: info
- 根據默認的斷行規則
:::

### break-all
::: info
- CKJ(中/韓/日文)**除外**的任意字符強迫斷行，不保留完整單字
:::

### keep-all
::: info
- CKJ(中/韓/日文)的字符**不**斷行
:::

### break-word
:::info
- 保留單字並強迫斷行
:::

---

## white-space

### normal
:::info
- 連續空白會被合併，換行符會被當作空白來處理
:::

### no-wrap
:::info
- 和normal一樣，連續空白會被合併，但換行符號會無效（這點有待商榷？？），不折行
:::

### pre
:::info
- 連續空白會被保留，遇到換行符號或`<br>`才會換行
:::

### pre-wrap
:::info
- 連續空白會被保留，依單字折行
:::

### pre-line
:::info
- 會合併連續空白，依單字折行，並保留換行符號
:::