CSS text-wrap 怎麼選？用 balance、pretty、stable 控制換行

text-wrap 控制的是 soft line breaks#

text-wrap 是 text-wrap-mode 與 text-wrap-style 的 shorthand，初始值是 wrap。它影響瀏覽器可以自行安排的換行，不取代 white-space 對空白、強制換行和程式碼區塊的控制。

目前 MDN 將 text-wrap 標示為 Baseline 2024，但舊裝置或舊瀏覽器仍可能不支援所有值。先保留正常的 wrap，再用 feature query 或實際瀏覽器矩陣驗證增強效果。

短標題優先使用 balance#

balance 會嘗試讓每行的字元數更平均，適合標題、caption 和 blockquote 這類行數有限的內容：

1
.article-title,
2
.card-title {
3
  text-wrap: balance;
4
}

這不是把容器變寬，也不是保證每一行完全相同長度。瀏覽器會在可用寬度、字型、字距和實際文字共同限制下重新安排換行。MDN 提到 Chromium 和 Firefox 對 balance 會限制影響的行數，因此短區塊通常比長文章更適合使用。

如果標題中含有不可拆開的長 URL、檔名或英文 token，balance 也無法替你創造可用的斷字點；這時要另外處理 overflow-wrap、容器寬度或內容呈現方式。

pretty 只在長文字值得付出成本時使用#

pretty 讓瀏覽器為較長的文字選擇更講究的 soft line breaks，但 MDN 明確提醒它對效能有負面影響。可以先把它限制在需要改善閱讀節奏的區塊：

1
.article-lede,
2
.long-form-copy {
3
  text-wrap: pretty;
4
}

使用前至少確認三件事：

1. 文字區塊確實比標題長，balance 的有限行數不夠用。
2. 內容不是每次輸入都會即時變動的高頻區塊。
3. 在低階裝置、窄螢幕和載入中內容上量測 layout 與互動延遲。

若頁面問題其實是畫面外的大量內容導致初次渲染成本，text-wrap 不是替代方案；可以再看 content-visibility 與 contain-intrinsic-size 的版面穩定檢查，分辨文字換行和區塊渲染的責任。

stable 是給可編輯內容的特定選項#

stable 的用途不是讓一般文章「更穩」，而是搭配 contenteditable，讓使用者輸入時，已經在前面的行盡量維持穩定：

1
.note-editor {
2
  text-wrap: stable;
3
  white-space: pre-wrap;
4
}

這裡的 white-space: pre-wrap 仍然有自己的責任：保留使用者輸入的空白與強制換行，同時允許必要的自動換行。stable 只處理 soft line break 的編排，不能替代 caret、IME、捲動位置或無障礙編輯測試。

如果產品只需要顯示文章，不要為了「看起來穩定」選 stable；先用預設 wrap。若問題是 input 或 textarea 會隨文字變寬，請看 CSS field-sizing: content 的尺寸邊界，那是表單控制項 sizing，不是文章換行策略。

用 feature query 保留可用的 fallback#

對只想增強標題的頁面，可以先寫預設值，再在支援時套用：

1
.hero-title {
2
  text-wrap: wrap;
3
}
4

5
@supports (text-wrap: balance) {
6
  .hero-title {
7
    text-wrap: balance;
8
  }
9
}

若需要同時控制模式與風格，也可以拆開寫，讓意圖更清楚：

1
.article-copy {
2
  text-wrap-mode: wrap;
3
  text-wrap-style: pretty;
4
}

實務上先用 shorthand 比較容易閱讀；只有在需要獨立控制 mode 和 style、或要配合其他 CSS cascade 時，才拆成 constituent properties。不要因為看到瀏覽器支援 text-wrap 就假設每個 keyword、每個舊版裝置都一樣。

上線前的換行驗證#

不要只用一個短英文標題測試。至少準備以下案例：

• 短標題、兩行標題和接近容器寬度的標題。
• 中英混排、長 URL、檔名與不能任意拆開的 token。
• 窄螢幕、放大字體、不同字型載入前後的版面。
• contenteditable 輸入、貼上、多行空白與 IME 組字流程。
• 低階裝置上大量 pretty 段落的 layout 與互動反應。

DevTools 的 computed styles 可以先確認宣告是否生效，但最後仍要看真實換行、focus、caret 和捲動位置。好的 text-wrap 使用方式是把排版意圖寫進 CSS，同時保留不支援時仍然可讀、可操作的基本行為。

常見問題#