在網頁設計中，設計師經常會遇到一種情況：標題因為 RWD 自適應寬度出現變化，將最後一個字或兩個字擠到第二行，形成版面上的孤行。孤行不僅會破壞版面的平衡，也讓閱讀節奏變得奇怪。過去我們可能要透過手動插入 <br> 或調整字級並定義複雜的樣式來解決這個問題，但現在，CSS 帶來了更聰明的解決方案：text-wrap: balance。
什麼是 text-wrap: balance;？
簡單來說，這個屬性會要求瀏覽器自動計算文字的長度，並將其平勻地分配在每一行。它的目標是讓每行的寬度盡可能接近，達到視覺上的「平衡」。
為什麼需要它？
在傳統的網頁排版中，瀏覽器預設的換行規則是「盡量填滿每一行」，這往往導致：
- 標題的最後一行可能只剩一兩個字（俗稱孤行）
- 手動加入 <br> 的標籤很難適應不同寬度的行動設備。
- 句子因為寬度的限制，斷在不洽當的位置。
在 RWD 自適應的設計中，用戶的設備尺寸存在不確定性，你無法強制用戶只能使用特定規格的設備，而為了讓大多數的設備都可以維持一致的斷行標準，在過去，你需要寫很複雜的樣式規則，把每一種可能都考慮進去。這不只是花時間，當企劃因為案子需要更換標題時，整個計算又要再重來一次，在維護上會是一個非常麻煩的點。
但，有了text-wrap: balance; 這個屬性後，你就能輕易讓兩行以上的標題長度保持相對的一致，也不需要針對不同螢幕尺寸手動設定斷行，瀏覽器會動態計算最佳外觀，提升整體美觀與專業度，維護上也很方便單純。
如何使用？
使用方式非常簡單，只需在你的 CSS 中針對標題標籤（如 h1, h2）加入這行代碼：
h1 {
text-wrap: pretty;
text-wrap: balance;
}雖然文章主要是談 text-wrap: balance;，但還是需要稍微釐清一下 pretty 與 balance 兩者的差異，因為它們背後的邏輯並不同：
pretty(美化)：目的是為了避免最後一行只有一個單字（適用於多行段落），它不會強制每行等寬。balance(平衡)：目的是讓每行長度一樣長（適用於短標題）。
除了背後的邏輯不同之外，pretty 也可以是 balance 的降級版，讓較舊的瀏覽器也可以擁有類似的功能，你可以根據需要相互搭配使用。
注意事項
雖然 text-wrap: balance; 非常強大，但有幾點需要留意：
- 行數限制：為了性能考量，大多數瀏覽器只會對 4 到 6 行以內的文字塊進行平衡計算。因此，它最適合用在標題或簡短的引言，而不適合用在長篇內文。
- 性能消耗：瀏覽器需要進行額外的佈局計算，雖然在標題上影響微乎其微，但若大規模應用在全文，可能會影響網頁渲染速度。
text-wrap: balance需要元素有明確的寬度限制（如width、max-width或父層限制），否則不會自動換行。
文末
text-wrap: balance 是 CSS 現代排版中的一個小驚喜，它解決了困擾網頁設計師多年的孤行問題，不只讓文字排版更具專業感及提升閱讀舒適度。更象徵著網頁排版正朝向更自動化、更細緻的方向發展。身為開發者或設計師的我們，也不再需要為了那一兩個字與 CSS 樣式搏鬥，下次在處理網頁標題的排版時，不妨試著加上這個屬性，讓瀏覽器幫你打理好一切吧！
