CSS text-wrap: balance

這項傳統排版技術可手動撰寫換行符，讓文字區塊保持平衡，現在也適用於 CSS。

Adam Argyle

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

如果沒有 text-wrap: balance，設計師、內容編輯者和發布商幾乎沒有工具可以變更行平衡的方式。他們能使用的最佳選項是 <wbr> 或 ­，協助引導文字版面配置，針對換行和斷字位置做出更明智的決策。

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

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

使用 text-wrap: balance (CSS Text 4)，您可以要求瀏覽器找出最適合文字的平衡換行解決方案。瀏覽器知道所有因素，例如字型大小、語言和分配的區域。目前瀏覽器平衡文字換行的結果如下：

.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 沒有這種效果，請參閱以下範例：

您會發現開發人員工具顯示的寬度在結尾處有許多額外空間，對吧？這是因為這只是換行樣式，而非大小變更樣式。因此，至少在我看來，在某些情況下，text-wrap: balance 並不適用。舉例來說，資訊卡內的標題 (或任何有邊框或陰影的容器)。

諷刺的是，平衡的文字換行會造成所含元素不平衡。

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

瀏覽器會有效執行二元搜尋，找出不會造成任何額外行的最小寬度，並在一個 CSS 像素 (而非顯示像素) 停止。為進一步減少二元搜尋中的步驟，瀏覽器會從平均行寬的 80% 開始。