Kevin Powell - Community•3y ago

Possible to fix overflow of big text?

Hey, I got this text here overflowing. I'm 90% sure it is due to a combination of a big font-size, text-transform: uppercase, and perhaps letter-spacing. Is it possible to fix the overflow on this?

6 Replies

Unknown User•3y ago

Message Not Public

~MARSMAN~•3y ago

Yep clamp is great but if you wanna avoid the overflow of the text on small screens you're gonna need to set max-width, like in % relative to its parent container or in ch

son argOP•3y ago

Does ch mean character? Doesn't each character have their own unique width tho? "W" is probably bigger in width than "o" Both are considered a character tho

13eck•3y ago

ch is the width of the 0 character So, for example, 10ch is the length of ten 0 characters in the current font size, weight, family, etc

son argOP•3y ago

Aha, I c Thanks, guys!

13eck•3y ago

To piggyback on what ThatMartinDev said about max width and clamp, the human eye can comfortably scan back-and-forth line lengths between 45 and 90 characters; 66 character widely being stated as the "ideal". With that in mind, I use the following as a basis for all my text-based elements for width:

.measure {
  width: min(60ch, 100vw - 3em);
  margin-inline: auto;
}

.measure {
  width: min(60ch, 100vw - 3em);
  margin-inline: auto;
}

The width is the smaller of either 60ch (which is close enough to 66 character) or 3em short of the entire viewport width. This, combined with the margin-inline property there's always at least a 1.5em margin on each side so it doesn't butt up against the sides of the browser. Also, "measure" is the common typographic term for "length of the line". Of course, using 60ch as my default size, it allows me to make a nice (mathematically-speaking) sliding scale for measure:

::root {
--measure-half: 30ch;
--measure-short: 40ch;
--measure: 60ch;
--measure-long: 90ch;
}

.measure {
  width: min(var(--measure), 100vw - 3em);
  margin-inline: auto;
}

::root {
--measure-half: 30ch;
--measure-short: 40ch;
--measure: 60ch;
--measure-long: 90ch;
}

.measure {
  width: min(var(--measure), 100vw - 3em);
  margin-inline: auto;
}

You can then use locally-scoped variables to adjust the measure of the element if need be

Gaming

Programming

Possible to fix overflow of big text?