更強大的CSS自適應RWD font-size：text-grow與text-shrink

徹底告別換行破版？

我們在處理 RWD（響應式網頁設計）時，最頭痛的往往不是圖片，而是文字的換行。特別是在 banner（也有人稱hero）的大標題，設計師希望它永遠單行滿版，但視窗一縮小，文字就無情地折行，破壞了原本的視覺張力。

以往我們可能需要依賴clamp()達到max,min font-size的動態效果，但在 Chrome 145 版本之後，原生CSS就提供了強大的解決方案：text-grow 與 text-shrink。

語法介紹

這兩個屬性允許文字根據容器空間自動「膨脹」或「收縮」，核心概念是不換行，改變文字型態來適應容器。

/* 基本語法 */
text-grow: <fit-target> <fit-method>? <length>?;
text-shrink: <fit-target> <fit-method>? <length>?;

• text-grow：當文字短於容器時，如何變大填滿。
• text-shrink：當文字長於容器時，如何變小塞入。

參數說明

1. <fit-target>：決定調整的對象 (必填)

決定了多行文字該如何反應：

• per-line (逐行調整)：
  • 對於 text-grow：每一行都會獨立計算，短的行會自動擴展填滿容器。
  • 對於 text-shrink：長的行會自動縮小，短的行保持原狀。這對於多行標題非常有用。
• consistent (一致性調整)：
  • 對於 text-grow：找出最短的那一行，計算放大比例後，所有行套用相同比例。
  • 對於 text-shrink：找出最長的那一行，計算縮小比例後，所有行套用相同比例。這能保持文字原本的層級與視覺比例。

2. <fit-method>：決定變形的方式 (選填)

• scale：縮放字形而不是改變 font-size。
• scale-inline：縮放字形而不是改變 font-size，但只能水平縮放。
• font-size：相應地增大或縮小字體大小。
• letter-spacing：字母間距會增加/縮小，而不是改變 font-size。

3. <length>：安全界線 (選填)

• 對於 text-grow：設定最大字體大小。
• 對於 text-shrink：設定最小字體大小。

範例

以下展示自適應標題：

.title {
  /* 當文字不夠長時：逐行調整 font-size，最大不超過 120px */
  text-grow: per-line font-size 120px;
  
  /* 當文字太長時：逐行使用 scale 縮放以適應容器 */
  text-shrink: per-line scale;
}

無障礙的隱憂

雖然這功能看起來很夢幻，但在導入實際專案前，必須考慮 A11y（Accessibility） 的問題。

因為當使用者放大瀏覽器時（例如使用者加大 viewport 到 150% 時），如果容器寬度沒有跟著變大，文字為了「塞進」容器，反而會執行 text-shrink 維持原狀或變得更難閱讀。所以如果要用的話，我建議：

• 設定下限：務必在 text-shrink 中設定 <length> (最小字體大小)。
• 僅用於標題：避免用於標題之外的正文。

越來越靈活的CSS

text-grow 與 text-shrink的出現，讓我們對原生 CSS 網頁設計 RWD 策略有更靈活的寫法，擺脫更多對 JS 的依賴。