還記得第一次發布自己的網站那一刻，當它終于在互聯網上供所有人瀏覽時，我興奮地打開了手機，結果卻被頁面上那些標題和段落文字的“慘烈”布局驚到了。

是的，第一次遭遇了Web開發中最惱人的問題之一：

響應式文本布局。

比如一個標題，就那么一個孤零零的單詞突然被擠到下一行；或者一段文字的最后一行，居然只剩一個孤單的詞，好像被人遺忘在角落一樣。

真的太不美觀了。

但好消息來了：CSS終于新增了一個屬性，專門用來解決這個問題！

用text-wrap: balance; 讓標題更協調美觀

這個看似簡單的小屬性，能幫你自動平衡標題各行文字長度，避免長短行明顯不均勻的現象，讓文本呈現更為和諧。

比如這樣：

h1, h2, h3 {
  text-wrap: balance;
}

只需簡單一行代碼，你的標題布局立刻變得賞心悅目：

原本很長的一個標題
現在自動平衡成了
幾行舒適的文本

尤其適用于1～3行的標題，讓排版看起來仿佛經過精心設計。

用text-wrap: pretty; 讓段落告別尷尬換行

對于更長的段落，我們可以用另一個值：text-wrap: pretty。

它的作用同樣簡單直觀：避免段落最后一行只剩一個孤零零的單詞，至少將兩個單詞放在一起，更顯協調與完整。

p {
  text-wrap: pretty;
}

從此不再出現這樣的情況：

這是一個很普通的段落，
但末尾只剩下一個
孤單的詞。

現在效果好多了吧？

各大瀏覽器支持情況如何？

• text-wrap: balance目前所有主流瀏覽器（Chrome、Edge、Firefox、Safari）均已全面支持。
• text-wrap: pretty截至2025年中旬，Firefox和Safari尚未支持。不過好在即便瀏覽器不支持，它也不會造成任何問題，只會自動退化為原本的普通換行方式。

所以，你現在就可以放心使用了。