在中文中有所謂「孤字不成行，單行不成頁」的寫作排版概念，意思是說「一個字（不含標點號）不能成為一行，一句話不能成為一頁」，因為這樣除了很醜外，也容易讓人看不懂這個詞或句子在寫什麼，不易閱讀。當然，在英文中也有類似的概念。

不過呢，在現代網頁中，使用者個螢幕寬度不同，所以文章的寬度常常大小不一，文字是流動排版的，這樣就非常容易造成「單字不成行」的問題。

所幸，現在 CSS 有新的語法可以來解決類似的問題了！
這次要解說的是 text-wrap 這個屬性，支援的 2 個新的值：

• balance

• pretty

本篇同步發表於我的 Hashnode 部落格：
Eva Chen | 網頁設計師下班後 (hashnode.dev)

一、text-wrap: balance - 讓標題和短文案視覺效果更平衡

你有沒有遇過這種情況：一個置中的標題，第一行特別長，第二行卻只有幾個字，看起來頭重腳輕？
text-wrap: balance 就是來解決這個問題的！

它的作用是讓瀏覽器自動計算，盡可能使每一行的文字數量都差不多，創造一個視覺上更平衡、和諧的文字區塊。 這對於置中的標題、引言或任何簡短的文字都非常實用。

實際應用 DEMO

DEMO 連結：CSS text-wrap: balance

CSS：

h2 {
    text-wrap: balance;
}

二、text-wrap: pretty - 告別尷尬的「孤字」

在排版學中，一個段落的最後一行只有一個單詞，被稱為「孤兒 (orphan)」。 這種情況會打斷閱讀的流暢感，看起來也不太美觀。 text-wrap: pretty 的主要任務就是避免產生這種孤字。

它會用更聰明的演算法來處理換行，讓最後一行至少有兩個或更多的單詞。 雖然運算成本比預設高一點，但能有效提升長篇文章的閱讀體驗。

實際應用 DEMO

看看下面這段內文的差異：

DEMO 連結：CSS text-wrap: pretty

CSS 樣式：

div {
  text-wrap: pretty;
}

看到差別了嗎？pretty 聰明地調整了前幾行的斷點，避免了最後一行只剩下「紀。」這個孤單的字。

那到底，我該用 balance 還是 pretty？只要一個簡單的原則就好：

• 標題用 balance，

• 內文段落用 pretty。

目前 balance 已全面支援（Can I Use）。
但是 pretty 還沒有（Can I Use），Firefox 尚未支援，不過呢，因為他不影響到版面造成破版，所以可以先寫，最多只是文字沒有被優化而已。

好的，今天就先到這裡囉！

延伸閱讀：

• 使用 text-wrap pretty 提升排版质量

• 5分钟快速了解text-wrap:balance的作用

• text-wrap进化:支持两子属性和pretty stable新值

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

感謝看到最後的你，若你覺得獲益良多，請不要吝嗇給我按個喜歡。❤️

如果你喜歡我的創作，還想看看其他有趣的分享與日常，
可以追蹤我的 IG @im1010ioio，或者是🧋送杯珍奶鼓勵我，謝謝你🥰。