題幹與適用場景
內容站包含卡片標題、文章摘要、長正文和可編輯備註。設計希望短標題的行長更均衡，正文盡量減少孤行，編輯器輸入時已完成的行保持穩定；同時要控制排版計算和舊瀏覽器差異。請說明 text-wrap-style 如何參與軟換行決策，以及怎樣選擇值、設定邊界並驗證。
這道題適合前端、設計系統和內容平台職位。重點是理解它影響換行選擇，不會創造新的換行機會，也不會替代寬度、斷詞或語言規則。
面試官考察點
強回答會區分 auto、balance、pretty 和 stable 的目標：預設效能、短區塊均衡、較慢但更好的長文排版，以及 contenteditable 編輯穩定性。回答還應涵蓋行數限制、text-wrap-mode: nowrap、語言和斷詞、CLS、相容回退和實測指標。
回答前需要釐清的問題
- 哪些內容是短標題、摘要、正文，哪些內容可編輯？
- 目標是視覺均衡、減少孤行、保持編輯穩定，還是最低排版成本？
- 內容長度、語言、字型載入和容器寬度範圍是什麼？
- 是否允許額外布局計算，首屏和滾動列表的效能預算是多少？
- 舊瀏覽器應保持預設自動換行，還是需要腳本增強？
30 秒回答框架
「我會按內容類型分層：短標題優先 balance，長正文在預算允許時考慮 pretty，可編輯區域使用 stable，其餘保持 auto。這些值只選擇既有軟換行點，仍需配合容器寬度、斷詞和語言規則。先提供 auto 作為安全回退，再用真實多語言資料測量布局、長列表成本、CLS 和編輯體驗，而不是只比較截圖。」
分步驟深入解答
第一步：確認它改變什麼
text-wrap-style 指示瀏覽器如何在既有軟換行機會中選擇斷點。它不會把 nowrap 變成可換行，也不會替代 overflow-wrap、hyphens 或容器尺寸策略。
第二步：為短標題選擇 balance
balance 試圖讓有限行數的文字更均衡，適合標題、圖注和短摘要。瀏覽器會限制受影響的行數，長正文不能假設所有行都被全局優化。
.card-title {
text-wrap-style: balance;
max-inline-size: 32rem;
}第三步：謹慎使用 pretty
pretty 傾向更好的整體排版和更少的孤行，但計算成本高於 auto。應把它限制在文章正文或關鍵行銷段落，並透過長文、字型變化和低階裝置測量，而不是全站無差別開啟。
第四步：為編輯區域選擇 stable
stable 面向 contenteditable 等編輯體驗，讓游標之前的行盡量保持穩定，避免使用者輸入時整塊文字反覆重排。它不是版本歷史、復原堆疊或協同編輯衝突解決方案。
第五步：處理 text-wrap-mode 與斷詞
當 text-wrap-mode 為 nowrap 時，text-wrap-style 不會生效。長 URL、中文、德語複合詞和混合腳本還受 overflow-wrap、word-break、hyphens 和語言標籤影響，必須一起設計。
第六步：控制布局與效能邊界
換行改變會影響區塊高度、卡片網格和首屏布局。對虛擬列表、搜尋結果和伺服器渲染頁面記錄布局偏移、樣式計算耗時和字型載入後的二次排版；不能只在固定寬度的開發截圖中判斷成本。
第七步：規劃相容和漸進增強
不支援新值的瀏覽器通常會忽略宣告並使用預設換行。把 auto 作為基礎行為，再透過特性檢測或選擇器增強。不要用逐字測量腳本模擬全部演算法，除非目標瀏覽器和產品收益足以覆蓋複雜度與無障礙風險。
第八步：建立多語言驗收
測試中文、英文、德語長詞、阿拉伯語 RTL、日文、表情符號、動態字型、縮放、編輯、複製貼上和內容更新。比較首屏、列表滾動、焦點、標題高度、孤行數量和舊瀏覽器回退，確保視覺優化沒有損害可讀性。
設計取捨與邊界
balance 更適合短區塊，pretty 更看重排版品質但成本更高，stable 解決編輯時的行穩定性；auto 是通用且效能可預測的基礎值。它們都不改變語義、內容或既有換行機會。
排版值應和容器、字型、語言、斷詞、響應式規則一起評估。對高頻滾動列表或即時編輯器，局部啟用比全局啟用更容易控制預算。
落地計畫與證據
先選卡片標題、文章正文和備註編輯器各一個元件，記錄內容長度分布、行數、字型和效能預算。基礎樣式使用 auto，在對應類型上逐步啟用 balance、pretty 或 stable。
把值的選擇理由、支援矩陣、長文限制、語言規則和測量指標寫入元件文件。用真實內容做視覺、效能、鍵盤和編輯回歸，並保留關閉增強後的可用截圖與數據。
常見誤區與追問
把 balance 當成任意長度的全局優化
瀏覽器會限制可平衡的行數，長正文不應假設全部行被均衡。將它限制在標題和短摘要。
全站使用 pretty
更好的孤行處理可能增加排版成本。先在關鍵正文試點，用長文和低階裝置數據決定範圍。
用 stable 解決所有編輯問題
stable只影響換行穩定性，不負責復原、協同或游標語義。編輯器仍需自己的狀態和無障礙設計。
忽略 nowrap 與語言規則
nowrap 會使該屬性無效；斷詞和語言標籤決定可用的換行機會。必須把相關 CSS 與 locale 一起測試。
標題仍然難讀怎麼辦？
先檢查容器寬度、字型載入、最大行數、語言和可用軟換行點，再決定調整 balance、斷詞、字號或內容；不要只反覆切換換行值。