htmlcssfont-size

Automatically Resize Overflowing Text With CSS

I currently have the following code:

<p style="font-size: 20em; max-width: 100vw;">Hellooo!</p>

As you can see, the font-size is too large for the screen. I want the text to stay at its set size until it overflows the screen (My attempt is the max-width, but that is not working). Is there a way to fix this with CSS and HTML only?

Since I want the text size to be 20em unless it overflows the screen, I do not want to set the width to any value other than 20em.

Thanks!

Solution

  • min should do it.

    With a known font, you can also use a good fallback.

    p {
  font-size: min(20em, 28vw);
  
  /* Next rules are only be have a clearer preview */
  line-height: 1;
  text-align: center;
  padding: 0;
  margin: 0;
}
    <p>Hellooo!</p>