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 屬性的互動

平衡文字與 white-space敬上 因為一個請求不要包裝，而另一個要求 平衡包裝請取消設定空白字元屬性，然後 這時可以再次套用平衡包裝。

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

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

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

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

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

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

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