CSS 文字換行：美化

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

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 錯誤追蹤工具中提報問題，並附上詳細資料和正確/不正確的換行符號範例，我們會盡快回覆您。