本頁面由 Cloud Translation API 翻譯而成。

CSS 文字換行：餘額

CSS 是一種經典的字體排版技術，是針對均衡的文字區塊以手動方式編寫換行符號的做法。

Adam Argyle

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

瀏覽器支援

沒有 text-wrap: balance；內容編輯器和發布商幾項工具來變更線條的平衡方式可用的最佳選項 <wbr> 或 可提供協助協助文字版面配置做出更明智的決策，判斷換行字元和字詞的換行位置。

開發人員並不知道最終大小、字型大小，甚至是標題或段落。維持有效、美感所需的所有變數我們在瀏覽器中處理文字換行。因此我們會看到標題包裝內容，如下圖所示：

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

使用 CSS 文字 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敬上因為一個請求不要包裝，而另一個要求平衡包裝請取消設定空白字元屬性，然後這時可以再次套用平衡包裝。

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

某些 JavaScript 解決方案提供平衡文字的優點自動換行，因為這類元素會變更所屬元素本身的 max-width。這個還提供一項額外優勢：達到平衡區塊text-wrap: balance 不具此效果，您可以參考以下範例：

標題與先前的開發人員工具一樣醒目顯示，但這次不會涵蓋完整寬度。它在結尾之前又多了一行，因此文字區塊相當平衡。

看看開發人員工具顯示的寬度如何加上許多額外空間？這是因為這是納入樣式，而不是尺寸變動的樣式。因為有些時候，text-wrap: balance 不好意思，至少在我的看法例如資訊卡 (或任何容器) 中的標題加上邊框或陰影)。

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

瀏覽器有效執行二進位搜尋，以找出最小寬度不會造成其他線條，只停在一個 CSS 像素 (未顯示) 像素)。為了進一步減少瀏覽器在二進位搜尋中採取的步驟，平均線條寬度的 80%。