CSS 文字換行:餘額

這項經典的排版技巧,是指手動為平衡的文字區塊編寫換行符號。

Adam Argyle
Adam Argyle

text-wrapbalance 值屬於 CSS 文字層級 4。請參考本文提供的範例,瞭解這一行 CSS 如何大幅改善文字版面配置。

瀏覽器支援

  • Chrome:114。
  • Edge:114。
  • Firefox:121。
  • Safari:17.5。

資料來源

試用示範版

沒有 text-wrap: balance,設計師、內容編輯人員和發布者就沒有太多工具可以改變平衡線的顯示方式。最佳做法是使用 <wbr>&shy;,協助引導文字版面配置,做出更明智的決定,決定在何處換行和分字。

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

開發人員工具會醒目顯示標題,標題會跨越內嵌空間的整個寬度,且第二行有兩個懸掛字詞。
試用示範版
.unbalanced {
  max-inline-size: 50ch;
}

您可以使用 CSS Text 4text-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 不具此效果,您可以參考以下範例:

標題會像先前的開發人員工具一樣醒目顯示,但這次不會橫跨整個畫面寬度。它在結尾之前又多了一行,因此文字區塊相當平衡。

請注意,DevTools 顯示的寬度在結尾有許多額外的空格。這是因為這是納入樣式,而不是尺寸變動的樣式。因此,在某些情況下,text-wrap: balance 的表現並不理想,至少在我看來是這樣。例如資訊卡內的標題 (或任何具有邊框或陰影的容器)。

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

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

瀏覽器會有效執行二元搜尋,找出不會產生任何額外行數的最小寬度,並在一個 CSS 像素 (而非顯示像素) 處停止。為了進一步減少瀏覽器在二進位搜尋中採取的步驟, 平均線條寬度的 80%。