v150 · css · shipped

CSS text-fit property

A new CSS property that lets text automatically scale to fit its container — growing to fill available width or shrinking to avoid overflow — without JavaScript or manual font-size adjustments.

at a glance

Shipped in	Chrome 150 (desktop, Android, WebView)
Status	Enabled by default
Flag	None
Standards position	Gecko: no signal · WebKit: no signal
Spec	CSS Text Module Level 4 (W3C CSSWG editor's draft)
Explainer	explainers-by-googlers / css-fit-text
CSSWG issue	w3c/csswg-drafts #12887
ChromeStatus	5104141688635392 — CSS text-fit property

why it exists

Making text fit a container has been a persistent layout challenge. Responsive headlines that fill a full-width column, captions that must not overflow a fixed box, pull quotes that need to span exactly the width of a figure — all of these required JavaScript hacks: iterative font-size bisection, SVG scaling, transform: scale(), or libraries like FitText.js. The browser already computes line widths during layout; text-fit exposes that information as a first-class layout primitive so the engine can scale text before the first paint.

Source: css-fit-text explainer §1 "Motivation".

the property

syntax

text-fit: none
         | [ grow | shrink ] [ consistent | per-line | per-line-all ]? [ <percentage> ]?

Value	Meaning
`none`	Default. No scaling is applied.
`grow`	Scale text up so lines fill the container's inline width. Useful for headlines that should always span the full column.
`shrink`	Scale text down so lines that would overflow instead fit within the container. Useful for fixed-size text boxes.

fit target (second keyword)

Value	Meaning
`consistent`	The widest line determines the scaling factor; every line scales by the same amount. Preserves a uniform text size across all lines.
`per-line`	Each line is scaled independently — except the last line, which keeps its natural size. Good for justified blocks.
`per-line-all`	Like `per-line` but includes the last line. Each line is independently sized including the final one.

scale limit (optional percentage)

An optional <percentage> clamps the scaling:

With grow: the text will not scale beyond this percentage of the original size. E.g. grow 200% caps growth at 2×.
With shrink: the text will not shrink below this percentage. E.g. shrink 50% stops at half the original size.

Source: css-fit-text explainer, syntax section.

scalable vs. static content

The spec distinguishes items inside a line box as either scalable or static:

Scalable	Text runs, percentage-based letter-spacing and word-spacing, `em`-relative values that resolve against the scaled font size.
Static	Replaced elements (images, `<input>`), atomic inlines, fixed-length margins/padding/borders, `px` values.

Fixed px values are never scaled, so a 4px border remains 4px even if the surrounding text grows. em values scale proportionally because they reference the computed font-size.

Source: css-fit-text explainer, "Scalable vs. Static" section.

examples

recipe 1 — headline that always spans the column

.hero-title {
  text-fit: grow consistent;
  /* Text grows uniformly until the widest line fills the container.
     If the text already overflows at normal size, use shrink instead. */
}

recipe 2 — caption that never overflows its fixed box

.caption-box {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-fit: shrink per-line-all;
  /* Each line shrinks independently so nothing overflows. */
}

recipe 3 — grow with a cap to avoid absurdly large text

.pull-quote {
  text-fit: grow consistent 180%;
  /* Uniform scaling, never bigger than 1.8× the original font size. */
}

recipe 4 — per-line shrink for a justified paragraph block

.sidebar p {
  text-fit: shrink per-line;
  /* Each line independently shrinks if needed. The last line keeps natural size. */
}

live demo (Chrome 150+)

The headline below uses text-fit: grow consistent and the caption uses text-fit: shrink per-line-all. In Chrome 150, both adapt to the container automatically.

Responsive Headline — expands to fill

A very long caption that must not overflow its fixed container width on any single line

browser support

Chrome / Edge	150 (enabled by default)
Firefox	No signal
Safari	No signal

Source: chromestatus.com browser positions, May 2026.