CSS 是一種經典的字體排版技術,是針對均衡的文字區塊以手動方式編寫換行符號的做法。
text-wrap
的 balance
值屬於 CSS 文字層級 4。請參閱本文中的範例,瞭解
這一行 CSS 可大幅改善文字版面配置
沒有 text-wrap: balance
;內容編輯器和發布商
幾項工具
來變更線條的平衡方式可用的最佳選項
<wbr>
或
­
可提供協助
協助文字版面配置做出更明智的決策,判斷換行字元和字詞的換行位置。
開發人員並不知道最終大小、字型大小,甚至是 標題或段落。維持有效、美感所需的所有變數 我們在瀏覽器中處理文字換行。因此我們會看到標題 包裝內容,如下圖所示:
![開發人員工具會醒目顯示標題,橫跨其內嵌空間的完整寬度,第二行包含兩個懸置字詞。](https://developer.chrome.google.cn/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-fe0c4a80e307b.png?authuser=19&hl=zh-tw)
.unbalanced {
max-inline-size: 50ch;
}
使用 CSS 文字 4 提供的 text-wrap: balance
,即可要求瀏覽器
找出最適合文字的平衡線包裝解決方案。瀏覽器
「能」掌握所有因素,例如字型大小、語言和分配的區域。
目前瀏覽器平衡文字包裝的結果如下所示:
![標題與先前的開發人員工具一樣醒目顯示,但這次不會涵蓋完整寬度。它在結尾之前又多了一行,因此文字區塊相當平衡。](https://developer.chrome.google.cn/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-0861292a42f0d.png?authuser=19&hl=zh-tw)
.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%。