【前端開發】如何透過 CSS 實作段落的斷行效果，white-space 語法應用

white-space 語法介紹

white-space: normal;

white-space: nowrap;

white-space: pre;

white-space: pre-wrap;

white-space: pre-line;

• normal：遇到連續空白、換行字元時，會合併成一個空白字元，自動換行。
• nowrap：遇到連續空白字元與換行字元時，會合併成一個空白字元，不論外層有沒有容器都強制不換行。
• pre：保留連續空白、換行字元，不自動換行（可以想像成 nowrap 但保留所有字元的原始機制）。
• pre-wrap：保留連續空白、換行字元，且自動換行。
• pre-line：遇到連續空白字元時，會合併成一個空白字元，但保留換行字元，會自動換行。

備註：pre 是 preserve 的縮寫。