行銷匯出的靜態 HTML 仍常把多行標題塞進窄卡片。預設情況下，最後一行往往只剩一兩個字，視覺上像「尾巴」懸在寬行之下。2026 年 可用 text-wrap: balance 讓引擎在寬度內重新分配換行，使各行字數更接近；text-wrap: pretty 則可在支援的瀏覽器微調段落右緣的 rag。它們不能取代好文案，却能移除大量手動 <br>，避免德文、日文翻譯變長後整段崩壞。建議搭配 Core Web Vitals 實驗室與實地 Safari 差異，以免把排版順滑誤認成 LCP 改善；若卡片內含自適應表單，請一併閱讀 field-sizing 與靜態表單。
本文給靜態站作者、設計系統維護者，以及必須在 macOS Safari 簽字才能上線的團隊。
靜態頁的孤行標題痛點
內容管理匯出並不知道卡片最終寬度。設計師以軟換行修飾，當德文翻譯多出約 30% 字元時，這些換行常把音節切在錯誤位置。宣告式規則依渲染寬度運作，在多語情境更可靠。
主視覺標題疊在照片上也一樣：右緣參差不齊會讓視線離開下方的行動呼籲按鈕。
text-wrap: balance 機制與限制
將 balance 用在應視為單一語意單元的標題：
.card-title {
text-wrap: balance;
max-inline-size: 22ch;
}請搭配 max-inline-size 限制工作集；遇到超長無空白字串，仍需 overflow-wrap: anywhere。
balance 會增加重排成本；若同時為卡片寬度做動畫，請把過渡控制在 300 毫秒 內，避免來回抖動。
支援文案的 text-wrap: pretty
pretty 適合註腳、法務聲明等短段落，不適合對列表頁的每一段長文套用。若全文約 40 KB 仍全開 pretty，Safari 的樣式計算會變重。
對照表：何時使用 balance
| 情境 | balance | 說明 |
|---|---|---|
| 卡片標題 | 建議 | 兩到三行短文字收益最大。 |
| 全大寫法務 | 謹慎 | letter-spacing 可能干擾。 |
| 程式碼區塊 | 否 | 需保留等寬格式。 |
| 導覽標籤 | 多半不需要 | 單行無收益。 |
Safari 與混排現實
WebKit 在中英混排時可能挑不同斷點。請在 320px、390px、834px 寬度擷取各語系最長字串。日文若顯得擠，請另外檢查 line-break: strict 與 balance 的組合。
跨 macOS 小版本發佈時，請用 Safari Technology Preview 做額外回歸；2026 年 文字模組修補頻繁。
無障礙與強制對比
balance 不改讀屏順序，但放大鏡使用者會看到行框跳動。避免同步播放字級彈簧動畫與 balance 切換，以免誘發前庭不適。
在 forced-colors: active 下，換行改變可能讓文字與影像重疊區位移，請複查對比。
漸進增強
@supports (text-wrap: balance) {
.hero-title { text-wrap: balance; }
}先寫舊瀏覽器可讀的字級與行高，再把現代屬性放進 supports。
效能護欄
行動 GPU 上，建議每個視窗可見的 balance 元素不超過約 12 個。與 contain: inline-size 併用前務必量測，避免裁切焦點環。
與內容協作
給編輯的每行字數預算請用 ch 撰寫並寫進 Storybook，翻譯變長時才能沿組件遷移。
A/B 測試時分開標註文案版號與 CSS 版號，避免分析誤判。
RTL 與邏輯屬性
dir="rtl" 時仍可用 balance，但上限寬度請用邏輯屬性，避免阿拉伯標題被裁切。圖示間距用 margin-inline-start。
上線前檢查清單
- 以各語系最長字串在三個斷點截圖。
- 啟用 macOS「增加對比度」檢查重疊。
- 比較 Safari 與 Chrome 列印 PDF 的換頁。
- 慢速調整寬度錄影約 30 秒，在 M3 等級硬體確認影格時間多低於 100 毫秒。
RUM 指標
可用標題容器的 CLS 作為代理：若 .hero-title 元素級 CLS 大於 0.01，常代表缺少 max-width 回退。
以 Safari UA 篩選重播片段，避免把 Chromium 雜訊當真實客訴。
設計權杖與工具類
全域 .text-balance 謹防被打包到每個節點；靜態輸出偏好元件級樣式。
若字級用 clamp()，每次調整都要重算 ch 上限。
CMS 護欄
富文本常插入不換行空格，干擾演算法；發佈管線應可選擇清除連續 \u00A0。
預覽必須載入與生產相同的 Web 字型。
平台工程交接
標註 HTML 與 CSS 的 CDN 快取邊界與 purge 順序；準備一行回滾片段只移除 text-wrap。
子資源完整性哈希需隨標題工具類更新；支援請用變更日誌對齊客服截圖。
若採用設計權杖自動產生 utility，請在 CI 加上「標題類別體積預算」閘門：單頁 gzip 後 CSS 增加超過 1.5 KB 就要求人工覆核，避免為了微調 rag 而把整包工具鏈打進靜態頁。
跨團隊演示時，建議在 README 附上三張對照截圖（無 balance、有 balance、僅降級 max-width），減少口頭描述造成的期待落差。
若行銷要求在標題中插入商標符號或上標，請先確認這些字元不會被字型 fallback 切成另一套度量；混用兩套度量時，balance 可能產生看似「隨機」的斷行，需要在字體子集化階段就把商標字元納入主字型，並在真機再驗一次。
常見問題
按鈕文字需要 balance 嗎？
通常不用；單行省略較務實。
列印樣式會繼承 balance 嗎？
視情況；PDF 怪異時在 @media print 重置。
能取代容器查詢嗎？
不能；兩者分工。
排版風險常在「讀者實機 GPU 與字型快取」浮現。Apple Silicon 的 Mac mini 能以接近上線環境的子像素呈現 Safari，噪音低、適合長時間並排盯像素。MacHTML 雲端主機約 每日 16.9 美元，可快速建立簽核用機，透過 SSH 跑截圖回歸，或以 VNC 讓遠端同事共用桌面，省下一台閒置測試機資本支出。