CSS 文字換行:美化

選擇啟用最佳化文字換行功能,享受超快感。

Adam Argyle
Adam Argyle

從 Chrome 117 開始,您可以使用新的文字包覆功能:text-wrap: pretty (來自 CSS Text Level 4)。

p {
  text-wrap: pretty;
}
https://codepen.io/web-dot-dev/pen/yLGmzLJ

排版的孤字和孤行是指段落或文字區塊結尾處的單字。孤字是指單獨出現在文字區塊頂端的字詞,孤行則是指單獨出現在文字區塊結尾的字詞。這類元素可能會打斷眼睛瀏覽文字的方式,導致內容難以閱讀。有些設計人員不想投入任何成本,並為了防止這類程式而花費大量時間。

並比較段落開頭顯示一個驚嘆號,並在結尾同時顯示一個孤立項目,而另一個段落卻不含孤立內容。
圖片來源:Google Fonts - 空格與孤字

從 Chrome 117 開始,只要使用一行 CSS 即可避免孤兒:text-wrap: pretty

這項功能不僅可確保段落結尾不會以單字結尾,如果段落結尾出現連續的連字號行,這項功能也會調整連字號,或是調整前幾行的寬度以騰出空間。並適當調整文字對齊方式。text-wrap: pretty 可讓您更輕鬆地設定行尾斷字,並決定文字斷字位置,目前主要著重於孤行。日後,text-wrap: pretty 可能會提供更多改善項目。

比較有孤字節的段落和沒有孤字節的段落,並分別標示為「不良」或「良好」。
圖片來源:為何應從內文中移除孤行。

還有 text-wrap: balance,雖然不會防止孤兒,但確保文字以能建立和諧文字區塊的方式進行換行。我個人會使用 balance 標題,並使用 pretty 標示段落。

如想進一步瞭解用於判斷最佳行數的演算法,或想對效能考量事項,請參閱工程師在功能後方建立的設計文件連結 Koji Ishii

如果你有其他改善建議,歡迎與我們分享!請在 Chromium 錯誤追蹤工具中提報問題,並附上詳細資料和正確/不正確的換行符號範例,我們會盡快回覆您。