在處理網頁資訊顯示時，最常用到 CSS 文字換行屬性來控制長網址、英文單字或標籤文字要不要自動折行。當容器寬度固定時，若遇到一串沒有空白的長網址（URL）或連續英文字母，瀏覽器預設會將它視為「同一個單字」而直接撐破外層版面。
⚡ 快速跳轉（依實務情境選擇）：
1. CSS 文字強制換行（word-break: break-all）
無論是中文、英文單字還是長網址，只要字元碰到容器右邊界就立即強制斷行（即使把一個完整的英文單字從中間切斷也會換行）：
.break-all {
word-break: break-all;
}- 適用場景：表格欄位寬度極窄、顯示超長網址（URL）、Hash 雜湊碼或訂單編號，要求版面邊界絕對對齊時。
2. CSS 英文單字換行（overflow-wrap: break-word）
優先維持英文單字的完整性（遇到過長的單字先嘗試移到下一行顯示）；只有當「單一英文單字或網址本身的長度比整行容器還寬」時，才會強制將該單字折行避免破版：
.break-word {
overflow-wrap: break-word;
word-wrap: break-word; /* 舊稱別名，兩者效果相同 */
}- 適用場景：一般中英混排的文章內文、留言區、部落格段落（能保護一般英文單字不被腰斬，又能防止長網址撐爆手機版畫面）。
3. CSS 強制不換行（white-space: nowrap）
強制所有文字與空白都排在同一行，除非遇到 HTML 的 <br> 標籤，否則絕不自動換行：
.no-wrap {
white-space: nowrap;
}- 適用場景：按鈕文字、導覽列選單、徽章標籤（Badge），或是搭配
overflow: hidden與text-overflow: ellipsis製作單行文字省略號（詳見 CSS 限制行數，文字超過單行/多行 使用省略符號…）。
進階補充：保留文字原本的換行符號（white-space: pre-line）
如果後端 API 回傳的字串裡包含 \n 換行符號（例如使用者在 <textarea> 輸入的多行留言），直接放進一般 <div> 預設會被合併成一個空白。這時只要加上 white-space: pre-line，就能讓瀏覽器自動識別 \n 換行，同時維持正常的容器寬度折行：
.preserve-newline {
white-space: pre-line;
overflow-wrap: break-word;
}CSS 換行屬性完整比較表
| CSS 屬性與設定值 | 英文單字是否會被從中切斷？ | 碰到容器邊界是否自動換行？ | 最佳實務用途 |
|---|---|---|---|
word-break: break-all | 會（碰到邊界立刻切斷） | 是 | 固定窄欄表格、長網址、程式碼字串 |
overflow-wrap: break-word | 僅在單字長於整行寬度時切斷 | 是 | 一般文章內文、中英混排卡片（最推薦） |
word-break: keep-all | 不會（連中文字詞也盡量不拆） | 僅在空白或標點符號處換行 | 特殊韓文排版或禁止字詞拆散的標題 |
white-space: nowrap | 不換行 | 否（強制維持單行） | 按鈕、標籤、單行省略號 ... |
開發者決策建議
在實際開發中，建議依照容器的性質選擇：
- 一般內文區塊：首選
overflow-wrap: break-word。它能確保英文單字在空間足夠時不被切斷，只有在極端情況下（如超長 URL）才會妥協斷行，閱讀體驗最平衡。 - 窄版 UI 元素：若容器寬度極度受限（如側邊欄、小卡片），則使用
word-break: break-all，確保版面不會因為長字串而撐開。 - 關於
keep-all的中文排版副作用：keep-all的設計初衷是為了讓 CJK（中日韓）文字在換行時，盡量以「詞」為單位而非「字」為單位。- 副作用警告：在純中文環境下使用
keep-all，若容器寬度過窄，瀏覽器會因為找不到空白處而拒絕換行，導致文字直接溢出容器（Overflow）。 - 解決思路：除非你有明確的「詞組不可拆分」需求，否則在 RWD 響應式網頁設計中，應避免對一般段落使用
keep-all，以免造成手機版面文字斷裂顯示異常。
發佈留言