CSS 文字換行:美化

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

Adam Argyle
Adam Argyle

在 Chrome 117 版中,你可以使用全新的文字換行功能:text-wrap: pretty (選用 CSS 文字層級 4)。

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

「巫師」和「大象」都只有一種字彙 段落或文字區塊結尾獨立顯示的字詞「喪偶」的意思 因為文字區塊的上方有孤單,而孤立的單詞在文字結尾 封鎖。他們會幹擾眼睛瀏覽文字,造成內容難以控制 以便閱讀。有些設計師不想付出任何成本,而且會竭盡所能 避免出現類似情形

並比較段落開頭顯示一個驚嘆號,並在結尾顯示一個孤立項目,相較之下,同個段落中卻沒有孤立的孤立項目。
圖片來源:Google Fonts—Widows &孤兒

自 Chrome 117 版起,您可以使用一行 CSS 來避免孤身:text-wrap: pretty

這項功能不只是為了使段落的結尾 則在連續顯示連字號時,也會調整連字號。 或調整先前的行以騰出空間。您也可以使用 根據文字對齊方式適當調整「text-wrap: pretty」適合 而這通常比較適合換行和文字換行,目前著重在孤島。 日後,text-wrap: pretty 可能會提供更多改善項目。

比較含有孤立文字和沒有字母的段落,每個段落都帶有不良或好像標記。
圖片來源:為何應從內文中移除孤立內容

另有 text-wrap: balance 但用於確保文字自動換行 和諧的文字區塊我個人使用 balance 做為廣告標題,pretty 用於 例如自動產生影片、音訊 和文章段落的摘要

如想進一步瞭解用來判定 最佳線條數量或效能考量,請按這裡連結,查看工程師建立的設計文件。 「Ishii Ishii」使用這項功能後。

如有其他程式碼破壞性改善或建議,歡迎與我們分享 他們!在 Chromium 錯誤追蹤工具中回報問題,並附上詳細資料,例如 很好和差的換行,我們之後會再討論。