更強大的CSS文字自適應RWD語法：text-fit

作者： cjzopen - 1月 15, 2026

徹底告別換行破版？

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

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

上線前各專家的討論方向（非正式）

最初的方向是傾向分成兩個語法：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：設定最小字體大小。

實際正式支援後的寫法

在Chrome 150正式支援之後，把語法簡化成text-fit，選填的選項也變了：

/* 正式格式 */
text-fit: <fit-type> ?<fit-method>? ?<percentage>?;

2. <fit-type>：自動填滿或縮小

grow：自動擴展填滿容器。
shrink：超出一行會自動縮小，未超出則保持原狀。
none：預設值，不使用此語法的功能。

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

per-line：每行依各自情況縮放，但最後一行與強制斷行處（例如 <br>）不縮放。
per-line-all：每行依各自情況縮放，包含最後一行與強制斷行處。
consistent：預設值，整段文字的所有行數使用同一個縮放比例。

3. percentage：放大或縮小的上下限 (選填)

搭配grow時：文字的放大上限（必須大於或等於100%）。
搭配shrink時：文字的縮小下限（必須介於0%至100%之間）。


.title {
  /* 當文字不夠長時，填滿容器，且最大只能放大5倍 */
  text-fit: grow 500%;
  
  /* 當文字太長時，縮小以適應容器 */
  white-space: nowrap;
  text-fit: shrink per-line-all 80%;
}

注意：使用shrink時，該元素文字設定必需不會換行（text-wrap: nowrap），否則不會有任何效果。

但問題就來了，不換行字又多又設定percentage的話一定會超出元素（沒設定percentage會有另一個問題：字小到看不見），所以當你使用shrink時，最好搭配 @container 語法限制觸發時機，例如：


.title {
  container-type: inline-size;
}
@container (width < 768px) {
  .title {
    text-wrap: auto;
    /* or */
    white-space: wrap;
  }
}

無障礙的隱憂

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

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

越來越靈活的CSS

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

搜尋此網誌