【CSS】text-fitプロパティについて

どうも、くまだです。

text-fitプロパティについてのメモ。

text-fitプロパティについて

text-fitプロパティは、テキストのフォントサイズを、親コンテナの幅にちょうどよく合うように自動でスケールするプロパティです。Chrome 150（2026年6月）で text-fitプロパティが使えます。

コードは以下になります。

    <h2 class="title ">
      テキスト
    </h2>
    <h2 class="title ">
      テ
    </h2>
    <h2 class="title ">
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    </h2>

.title {
    max-width: 300px;
    border: 1px solid #000;

    text-fit: grow;
}

テキストがコンテナ幅まで拡大されます。「見出しをコンテナぴったりにしたい」「タイトルが長すぎるときだけ縮めたい」みたいなときに使えます。

text-fitプロパティは以下の値が指定できます。

• none：デフォルト。text-fitなしと同じ。
• grow：テキストがコンテナより短いとき、コンテナ幅まで拡大する。
• shrink：テキストがコンテナより長いとき、コンテナ幅まで縮小する。

shrinkを指定した場合は以下になります。

.title {
    max-width: 300px;
    border: 1px solid #000;

    text-fit: shrink;
}

複数行に対しては以下のような指定もできます。

.title {
    max-width: 300px;
    border: 1px solid #000;

    text-fit: grow per-line-all;

}

第二引数には以下の値を指定できます。

• consistent：最大行（grow なら最短行、shrink なら最長行）を基準に、全行を同じスケール率で変える。行ごとの相対的な大きさは保たれる
• per-line：各行を独立にフィット。ただし最終行は除外（尻切れ回避）
• per-line-all：各行を独立にフィット。最終行も含める

引数三つ目では、スケール率の上限・下限を%で指定できます。

.title {
    max-width: 300px;
    border: 1px solid #000;

    text-fit: grow consistent 200%;
}

例えば1文字だけの見出しが画面いっぱいまで拡大されるのを防ぐ（元サイズの2倍まで）ことができます。

ここまで読んでくださりありがとうございました。