CSS 文字換行：餘額

這項經典的排版技巧，是指手動編寫適當的斷行符號，以平衡文字區塊。

Adam Argyle

text-wrap 的 balance 值屬於 CSS Text Level 4。請參閱本文中的範例，瞭解這一行 CSS 如何大幅改善文字版面配置。

沒有 text-wrap: balance，設計師、內容編輯人員和發布者就沒有太多工具可以改變平衡線的顯示方式。最佳做法是使用 <wbr> 或 ­，協助引導文字版面配置，做出更明智的決定，決定在何處換行和分字。

開發人員無法得知標題或段落的最終大小、字型大小，甚至是語言。瀏覽器中包含所有變數，可有效且美觀地處理文字斷行。因此，我們會看到下圖所示的標題捲動效果：

.unbalanced {
  max-inline-size: 50ch;
}

使用 CSS Text 4 中的 text-wrap: balance，即可要求瀏覽器找出文字的最佳平衡線包裝解決方案。瀏覽器能夠知道所有因素，例如字型大小、語言和分配區域。目前瀏覽器平衡文字斷行結果如下所示：

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

還是建議您並排查看這些圖片，並且不要疊加偵錯資訊。

均衡的文字區塊應該會讓您更滿意。這類字體更能吸引目光，整體來說也更容易閱讀。

取得平衡

標題是讀者最第一眼看到的內容，標題應具有吸引力且易於閱讀。這麼做可吸引使用者注意，並讓他們感受到品質和保障。良好的排版設計能讓讀者放心，鼓勵他們繼續閱讀。

傳統上，這項工作是手動或以視覺方式完成，因為設計師在平衡文字時，希望能讓文字悅目，而非符合數學。這個主題通常稱為「公制與光學對齊」。對於紐約時報等大型出版機構而言，標題平衡是相當重要的使用者體驗細節。

字體排版中平衡文字的做法可追溯至早期的印刷作業，當時印刷業者會手動放置字母。隨著工具和技術的進步，成效也隨之提升。現今設計師有顏色、粗細、大小等項目，可在設計中平衡文字。

不過，在網頁上，由於文件會根據使用者變更大小和顏色，因此可用的控管選項較少。text-wrap: balance 會根據平面設計師的工作和傳統做法，自動將文字平衡的藝術帶入網頁。

平衡標題

這將會 (且應該是 text-wrap: balance) 的主要用途。繪製眼睛，並使其對稱且易於閱讀。使用下列 CSS 將所有標題設為平衡文字斷行：

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

由於文字需要換行，因此必須從某處套用行長度上限，因此單獨套用這項樣式可能無法提供預期的結果。您會在本篇文章的範例中看到 max-inline-size 設定，這類型類似 max-width，但可為任何語言設定一次。

限制

平衡文字的工作並非免費。瀏覽器需要循環處理疊代，才能找出最平衡的包裝解決方案。這項規則可降低這個效能成本，僅適用於六行以下的換行符號。

效能注意事項

請勿將文字斷行平衡功能套用至整個設計。由於六行上限，是已放棄的要求，且可能會影響網頁轉譯速度。

* {
  text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
}

這項功能的一大優點，就是您不必等待文字換行與字型載入的時間，也不必像使用 JavaScript 時那樣調整時間。瀏覽器會負責處理！

與 white-space 屬性互動

平衡文字會與 white-space 屬性競爭，因為前者要求不換行，後者要求平衡換行。如要解決這個問題，請取消設定空白空間屬性，然後再套用平衡的包裝。

.balanced {
  white-space: unset;
  text-wrap: balance;
}

平衡不會變更元素的內嵌大小

針對平衡文字包裝，某些 JavaScript 解決方案具有優勢，因為這些解決方案會變更包含元素本身的 max-width。這樣的好處是，對平衡區塊進行「縮減包裝」的額外好處。text-wrap: balance 不會產生這種效果，請參考以下範例：

請注意，DevTools 顯示的寬度在結尾有許多額外的空格。這是因為它只是一種包裝樣式，而非大小變更樣式。因此，我至少認為 text-wrap: balance 不甚理想，例如資訊卡內的標題 (或任何具有邊框或陰影的容器)。

平衡的文字換行會以不公平的方式，導致所含元素出現不平衡的情形。

簡要說明瀏覽器使用的技術

瀏覽器有效地在不會造成任何額外行的最小寬度時執行二進位檔搜尋，只停在一個 CSS 像素 (不顯示像素) 時停止。為了進一步減少二分搜尋中的步驟，瀏覽器會從平均線寬的 80% 開始。