Automatically Resize Overflowing Text With CSS

user_15837542 0
Viewed 387

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!

font-size css html
4 Answers

If you know the length of text, you can use the CSS min() function with your em sizing and the maximum size dependent on the viewport. Otherwise you are going to need a polyfill.

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

user_141905430

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>

user_59756780

You can use the CSS calc function and change the font size based on the vw value.

<p style="font-size:calc(25vw)">Hellooo!</p>
user_177629790

A combination of media-queries and variable units(vw) will solve!

.mytext{

}
@media screen and (min-width: 1200px) {/*adjust*/
  .mytext {
    font-size: 20em;
  }
}
@media screen and (max-width: 1200px) {/*adjust*/
  .mytext {
    font-size: 20vw;
  }
}
<p style="" class="mytext">Hellooo!</p>

user_148628850
Related