Automatically Resize Overflowing Text With CSS-CodePudding

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!

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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="" >Hellooo!</p>

CodePudding user response：

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>

CodePudding user response：

ttps://i.imgur.com/I5DFV.jpgttps://i.imgur.com/I5DFV.jpgttps://i.imgur.com/I5DFV.jpgttps://i.imgur.com/I5DFV.jpgttps://i.imgur.com/I5DFV.jpgttps://i.imgur.com/I5DFV.jpgttps://i.imgur.com/I5DFV.jpgttps://i.imgur.com/I5DFV.jpgttps://i.imgur.com/I5DFV.jpgttps://i.imgur.com/I5DFV.jpgttps://i.imgur.com/I5DFV.jpgttps://i.imgur.com/I5DFV.jpgttps://i.imgur.com/I5DFV.jpgttps://i.imgur.com/I5DFV.jpgttps://i.imgur.com/I5DFV.jpgttps://i.imgur.com/I5DFV.jpgttps://i.imgur.com/I5DFV.jpghttps://i.imgur.com/I5DFV.jpg

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