Make width text fit in 1 line of CSS | CSS tricks

From Adamprototyped in Chrome Canary 145:

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

Danny discussed this a while ago when he looked at different approaches to fitting text into a container, where the syntax was spelled out (text-shrink included) which you can find in The interpreter of Roma Komarov:

text-grow:  ? ?;
text-shrink:  ? ?;

• • per-line: For text-growlines of text shorter than the container will fit inside. For text-shrinklines of text longer then the container shrink to try it on.
  • consistent: For text-growthe shortest line will grow to fit the container, while all other lines will grow by the same scale factor. For text-shrinkthe the longest line wants shrink to fit inside the container, while all other lines shrink by the same scale factor.
• (optional)
  • scale: Scale the glyphs instead of the font-size.
  • scale-inline: Scale the glyphs instead of the font-sizebut only horizontally.
  • font-size: Increase or decrease the font size accordingly.
  • letter-spacing: The letter spacing becomes larger/smaller instead of the font-size.
• (optional): The maximum font size for text-grow or minimum font size for text-shrink.

Note the different adjustment methods: they scale the glyphs or adjust the actual value of the text font-size. So of course the interpreter notes that accessibility issues are still being worked out. Like:

If an end user attempts to increase the font size, UAs should not adjust enlarged lines to fit the width of the container. Is the minimum font sufficient?

Speaking of open questions, Una Kravets explains a few about Bluesky:

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

That’s possible contribute to the discussion in the GitHub problem of course.

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

We’ve certainly come a long way since the days of magic numbers and FitText.js!

Direct link →