v150 · CSS · Typography

CSS text-fit property

Chrome 150 adds the text-fit CSS property. It controls how inline text is scaled to fit a line box. Use text-fit: grow when short text should expand to fill the available inline size, or text-fit: shrink when oversized text should scale down instead of clipping — eliminating many JavaScript font-size fitting hacks.

concepts

  1. Text Fit Demo

    Resize the container and watch the headline scale automatically to fill it. Compares text-fit: grow, shrink, and fixed-size text.

  2. Fit Value Comparison

    Side-by-side comparison of all current text-fit values across different container widths. Shows when each value is appropriate and how percentage clamps interact with shrinking.

  3. Card Grid

    A six-card responsive grid where every headline uses native text-fit. Drag the column slider from 1 to 4 and edit the headline text — all cards adapt simultaneously with no JavaScript. Toggle between grow, shrink, and none to see the core behavior.

  4. Hero Editor

    An editable hero section where you type any headline and native text-fit scales the text at paint time. Drag the width slider and toggle fit modes to see the property in action. No JavaScript font-size fitting required.

  5. Price Tag

    Product prices range from $1 to $1,299.99 to ¥12,800. Each price bubble is a fixed size; text-fit: shrink scales long prices down to fit. Toggle off to see the overflow problem. Add custom prices or switch currency to stress-test the layout.

  6. Localization Labels

    UI buttons and circular badges in 12 languages — from English "Subscribe" (9 chars) to Finnish "Tilaa uutiskirje" (16 chars). text-fit: shrink scales long labels to fit the fixed-size container with no per-language CSS overrides. Toggle to see overflow without the property.

why it shipped

Responsive typography that fills or stays within a line box — card headings, hero text, dashboard labels — previously required JavaScript libraries (fitText.js, textFit) that recalculate on every resize. text-fit moves this into CSS, works at paint time without layout thrashing, and respects the cascade including media queries and container queries.

the property

/* Scale short text up to fill the line box */
.hero-title {
  font-size: 1.5rem;
  text-fit: grow;
}

/* Only shrink oversized text */
.card-label {
  font-size: 1.5rem;
  text-fit: shrink;
}

/* Optional percentage clamps the line scaling factor */
.banner {
  text-fit: shrink 60%;
}

/* Default — no fitting */
.normal {
  text-fit: none; /* or just omit the property */
}

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗