Fit width text in 1 line of CSS 관련

CSS > Article(s)

---

Article(s)

• <fit-target>
• <fit-method> (optional)
• <length> (optional)

---

Fit width text in 1 line of CSS

The Chrome team recently prototyped a working solution for fitting text to the width of a container in CSS using a text-grow property.

From Adam, prototyped in Chrome Canary 145:

h1 {
  text-grow: per-line scale;
}

Danny discussed this a while back when looking at different approaches for fitting text to a container, spelling out the syntax (text-shrink included) that you can find in Roma Komarov’s explainer (xplainers-by-googlers/css-fit-text):

text-grow: <fit-target> <fit-method>? <length>?;
text-shrink: <fit-target> <fit-method>? <length>?;

---

<fit-target>

• per-line: For text-grow, lines of text shorter than the container will grow to fit it. For text-shrink, lines of text longer than the container will shrink to fit it.
• consistent: For text-grow, the shortest line will grow to fit the container while all other lines grow by the same scaling factor. For text-shrink, the longest line will shrink to fit the container while all other lines shrink by the same scaling factor.

---

<fit-method> (optional)

• scale: Scale the glyphs instead of changing the font-size.
• scale-inline: Scale the glyphs instead of changing the font-size, but only horizontally.
• font-size: Grow or shrink the font size accordingly.
• letter-spacing: The letter spacing will grow/shrink instead of the font-size.

---

<length> (optional)

• The maximum font size for text-grow or minimum font size for text-shrink.

Notice the different fit methods — they either scale the glyphs or adjust the text’s actual font-size. So, naturally, the explainer notes (explainers-by-googlers/css-fit-text) that accessibility concerns are still being worked out. Like:

If an end-user tries to enlarge font size, UAs should not fit enlarged lines to the container width. Is minimum-font setting enough?

Speaking of open questions, Una Kravets highlights a few on Bluesky:

• Should the last line of a paragraph be scaled?
• Is the current line-height behavior as expected?
• Should it scale non-text parts such as inline images together?

You can contribute to the discussion (w3c/csswg-draftsf) in the GitHub issue, of course.

Donnie D’Amato wonders if, perhaps, this idea is better suited for print styles rather than screens. That’s an excellent use case I hadn’t thought of.

We sure have come a long way from the days of magic numbers and FitText.js!

CSS Text Grow · December 5, 2025

Fit width text in 1 line of CSS: h1 { text-grow : per-line scale ; } Prototype available in Canary 145+ Codepen · CSSWG · Explainer · Prior Art

Fit width text in 1 line of CSS

---

The Chrome team recently prototyped a working solution for fitting text to the width of a container in CSS using a text-grow property.