word-wrap、word-break 和 white-space 都是 CSS 屬性，用於控制文字在 HTML 元素中的渲染方式，特別是處理長單詞和空格。它們的功能有所重疊，但也各有側重：
1. word-wrap (現在通常使用 overflow-wrap)
- 功能： 允許瀏覽器在長單詞或 URL 內部進行換行，以避免它們溢位容器的邊界。
- 取值：
normal：預設值。只在允許的斷字點換行。break-word：允許在長單詞或 URL 的任何字元處換行。
- 主要應用場景： 防止長單詞或 URL 破壞佈局，尤其是在寬度固定的容器中。
- 示例： 一個長 URL 或單詞在一個窄的
div中，使用overflow-wrap: break-word可以使其在容器內換行，而不是溢位。
2. word-break
- 功能： 指定瀏覽器如何處理單詞邊界和換行。
- 取值：
normal：使用瀏覽器預設的換行規則。break-all：允許在任何字元處換行，包括 CJK (中文/日文/韓文) 字元。keep-all： CJK 字元不允許換行，非 CJK 字元遵循正常的換行規則。break-word： 和overflow-wrap: break-word行為一致，在長單詞或 URL 內部換行。 (這個值在 CSS3 中被引入，是為了相容性。)
- 主要應用場景： 處理包含 CJK 字元的文字，以及需要更精細控制換行行為的場景。
- 示例： 在一個窄的
div中顯示一段中文文字，使用word-break: break-all可以在任何字元處換行，而word-break: keep-all會避免在 CJK 字元內部換行。
3. white-space
- 功能： 控制如何處理元素內的空白字元（空格、製表符、換行符）。
- 取值：
normal：預設值。合併多個空格和換行符為一個空格，忽略開頭和結尾的空格。nowrap：不換行，文字會在同一行上連續顯示，直到遇到<br>標籤或其他強制換行的元素。pre：保留所有空格和換行符，就像在<pre>標籤中一樣。pre-wrap：保留所有空格和換行符，但允許在必要時換行。pre-line：合併多個空格為一個空格，保留換行符。break-spaces：和pre-wrap類似，但會將連續的空格視為一個空格，並在必要時進行換行，包括在空格處換行。
- 主要應用場景： 控制文字的格式化，例如保留程式碼的縮排或顯示詩歌的格式。
- 示例： 使用
white-space: pre可以保留程式碼塊中的空格和換行符，使用white-space: nowrap可以防止導航欄中的專案換行。
總結與比較：
| 屬性 | 主要功能 | 對 CJK 字元的影響 |
|---|---|---|
overflow-wrap (或 word-wrap) |
控制長單詞/URL 是否在內部換行 | 無 |
word-break |
控制單詞邊界和換行，包括 CJK 字元的處理 | break-all 和 keep-all 有影響 |
white-space |
控制空白字元的處理 | pre、pre-wrap、pre-line 會影響換行 |
通常情況下，overflow-wrap: break-word 足以處理大多數長單詞/URL 溢位的問題。如果需要更精細的控制，或者需要處理 CJK 字元，則需要結合使用 word-break 和 white-space。
希望這個解釋能夠幫助你理解這三個 CSS 屬性的區別。