CSS 是一種經典的字體排版技術，是針對均衡的文字區塊以手動方式編寫換行符號的做法。
text-wrap 的 balance 值屬於 CSS 文字層級 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 不具此效果，您可以參考以下範例：
看看開發人員工具顯示的寬度如何，結尾處加上許多額外空間。這是因為這是納入樣式，而不是尺寸變動的樣式。因此，我至少認為 text-wrap: balance 不甚理想，例如資訊卡內的標題 (或任何含有邊框或陰影的容器)。
平衡的文字換行會以不公平的方式，導致所含元素出現不平衡的情形。
簡單說明瀏覽器使用的技術
瀏覽器有效地在不會造成任何額外行的最小寬度時執行二進位檔搜尋，只停在一個 CSS 像素 (不顯示像素) 時停止。為了進一步減少二進位檔搜尋中的步驟，瀏覽器會從平均線條寬度的 80% 開始。