CSS 文字換行：美化

提供最佳化文字換行功能，提供流暢快速的美妝體驗。

Adam Argyle

在 Chrome 117 中，您可以使用 CSS 文字等級 4 全新的text-wrap: pretty文字換行功能。

p {
  text-wrap: pretty;
}

https://codepen.io/web-dot-dev/pen/yLGmzLJ

字體「widows 和單 phans」是獨立顯示在段落或文字區塊結尾的單一字詞。Widow 代表文字區塊頂端的字詞，孤立文字代表文字區塊的結尾。它們可以打斷我們瀏覽文字的方式，使得內容難以閱讀。有些設計人員會避免支付極高的費用，並盡力避免。

圖片來源：Google Fonts - 寡婦與孤兒

自 Chrome 117 版起，你可以使用一行 CSS 避免孤立無主：text-wrap: pretty。

注意： text-wrap: pretty 與 CSS 的 orphans 屬性不同，後者與使用 CSS 多欄版面配置時相關。此外，pretty 只會處理孤兒，不會處理寡言。

這項功能除了確保段落結尾不是單一字詞以外，如果段落結尾出現連續連字號行或調整前幾行以騰出空間，這項功能也會調整連字號。這項功能也會適當調整文字的對齊方式text-wrap: pretty 適用於一般的換行與文字換行效果，目前著重於孤立項目。日後text-wrap: pretty可能會提供更多改善功能。

圖片來源：為什麼應該從內文移除孤立文字。

其中的 text-wrap: balance 不會防止孤立項目，但可確保文字包裝時會產生和諧的文字區塊。我個人在標題中使用 balance，pretty 則用於段落。

如果您想進一步瞭解用來判斷最佳線數或效能考量的演算法，可以參閱這個連結，瞭解工程師在這項功能背後建立的設計文件 Koji Ishii。

如有其他破壞性改善或建議，歡迎與我們分享！請在 Chromium 錯誤追蹤程式中回報問題，並附上詳細資料，以及錯誤行失和錯誤行的例子，我們會盡快回覆。