說到 HTML 元素的換行效果，在前端有滿多種實作方式的最常見的方式是使用 <br /> 這個 HTML 元素來進行換行。
不過有一些狀況下會不希望改變元件的結構，或是因應 API 、多語系內容，每個資料欄位各自會有各自的斷行效果，此時使用 <br /> 元素來換行就會很麻煩，因為換行的效果是因情境改變。
在這樣的情況下，我們可以使用 \n 換行字元搭配 CSS 中的語法：white-space 來做到換行效果。white-space 語法介紹
根據 MDN ，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 的縮寫。
如果要解決在同一個元件上，可能會有多種不同換行情境的文案帶入，且不想要改變 HTML 元素的結構的話，pre-line 是一個比較符合開發情境，也非常方便的語法，簡單分享給大家，如果想要更精準知道實際套用在網頁的段落語法上會長怎麼樣，可以參考 MDN 文件下方的提供的互動範例來更了解這個語法的功能。
希望這篇文章可以帶大家了解這個方便又簡單的小語法，我是 Vivian ，我們下次見。
