CSS 文字換行：餘額

CSS 也有一種傳統字體排版技巧，可用來手動撰寫換行符號，以便達到平衡的文字區塊。

Adam Argyle

Twitter GitHub

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

瀏覽器支援

• 114
• 114
• 121

資料來源

試用示範模式

如果沒有 text-wrap: balance，設計人員、內容編輯器和發布者就擁有少數工具可以改變線條的平衡方式。透過 <wbr> 或 ­ 使用的最佳選項，有助於引導文字版面配置做出更明智的決策，判斷換行位置和字詞的位置。

開發人員不知道標題或段落的最終大小、字型大小，甚至是語言。所有能有效包裝文字包裝所需的變數，全都在您的瀏覽器中。這就是標題換行的原因，如下圖所示：

立即試用

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

透過 CSS Text 4 提供的 text-wrap: balance，您可以要求瀏覽器找出最適合文字的平衡行換行解決方案。瀏覽器知道所有因素，例如字型大小、語言和分配區域。目前的瀏覽器平衡文字換行結果看起來像這樣：

立即試用

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

建議您以並排顯示的方式同時查看這些變數，而且不會重疊偵錯資訊。

平衡文字區塊的一致性，您的眼睛應該更加滿意。這種方式能改善注意力，整體來說更易於閱讀。

取得平衡

標題是讀者最先看到的內容，標題應該要美觀且易於閱讀。這能吸引使用者註意，並能提供品質和保證。良好的字體排版能提升讀者信賴感，鼓勵他們繼續閱讀。

一般而言，這項工作是以手動或光學方式完成，因為設計人員想要平衡文字，而不是看著數學。本主題通常稱為指標與光學對齊。對於 New York Times 這類大型出版品，標題平衡是相當重要的使用者體驗細節。

試用示範

注意：雖然主要文章文字的差別並不在於脫穎而出，也不需要吸引讀者的目光。

在列印日期往來最早期的列印日期間取得平衡，此時印表機會出現手寫輸入。隨著工具和技術不斷演進，成果也有所提升。 當今設計人員需要在設計文字時取得平衡，包括顏色、重量、尺寸等。

但在網頁上，由於文件會隨使用者變更大小和顏色，因此可用控制項會變少。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% 開始。