---
# System prepended metadata

title: CSS斷行

---

# CSS斷行

- 統一的文字(html)
``` html=
<div class="txt">
    好難分辨white-space word-break word-wrap的差別         sooo hard
    「人生中有些我們很在乎的事情，其實一點價值都沒有。」
    ABCDE beautiful antidisestablishmentarianism 123456789   hello           wow
</div>
```
- 父層CSS
``` css=
.txt {
    width: 200px;
    border: 1px #888 solid;
    margin: 10px;
}
```
## word-break

### normal
::: info
- 根據默認的斷行規則
:::
![](https://i.imgur.com/JnmjGvO.png)


### break-all
::: info
- CKJ(中/韓/日文)**除外**的任意字符強迫斷行，不保留完整單字
:::
![](https://i.imgur.com/eW4SCRl.png)


### keep-all
::: info
- CKJ(中/韓/日文)的字符**不**斷行
:::
![](https://i.imgur.com/zcfqVCa.png)


### break-word
:::info
- 保留單字並強迫斷行
:::
![](https://i.imgur.com/HwKfItQ.png)

---

## white-space

### normal
:::info
- 連續空白會被合併，換行符會被當作空白來處理
:::
![](https://i.imgur.com/OqMO7VU.png)

### no-wrap
:::info
- 和normal一樣，連續空白會被合併，但換行符號會無效（這點有待商榷？？），不折行
:::
![](https://i.imgur.com/bFvOQK2.png)

### pre
:::info
- 連續空白會被保留，遇到換行符號或`<br>`才會換行
:::
![](https://i.imgur.com/0BmQI4z.png)


### pre-wrap
:::info
- 連續空白會被保留，依單字折行
:::
![](https://i.imgur.com/6Re1Fux.png)


### pre-line
:::info
- 會合併連續空白，依單字折行，並保留換行符號
:::
![](https://i.imgur.com/7hTJGvl.png)


