CSS 文字換行:美化

選擇採用最佳化文字斷行功能,以美觀取代速度。

在 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 日後可能會提供更多改善功能。