CSS text-fit

Last year I took an early look at text-grow in Chrome Canary. That demo stopped working, because text-grow and text-shrink have been merged into a single property, text-fit, which shipped in Chrome 150.

Syntax

The style from the old post becomes:

p {
-	text-grow: per-line scale;
+	text-fit: grow per-line;
}

The old scale keyword isn’t part of the new syntax. The values that can follow grow or shrink:

Value	Effect
per-line	Each line gets its own scaling factor, except the last line and any line ending in a forced break (such as a <br>).
per-line-all	Like per-line, but the last line and forced-break lines are scaled too.
consistent	Every line is scaled by the same factor. This is the default if you leave the second keyword out.
<percentage>	Optional. The maximum scaling factor for grow, or the minimum for shrink.

The CSS Text Module Level 5 draft has the full definitions.

One thing to note is that the font size itself doesn’t change:

Setting text-fit also doesn’t change an element’s computed font-size: the size adjustment is applied after the final rendering.

MDN

Example

Here is a strapline styled with text-fit: grow per-line, text-fit: grow per-line-all and text-fit: grow consistent. All three are editable and can be resized from the bottom right corner.

Support

Chrome and Edge 150+. Not yet in Firefox or Safari.

Links

• text-fit on MDN
• New in Chrome 150
• Explainer