徹底告別換行破版？ 我們在處理 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 ：相應地增大或縮小字體大小...