TL;DR: big elements cause annoying scroll-bars to appear.
My username is very big, so when I open this page on a mobile I get a horizontal scroll-bar for the entire page.
In CSS there’s a property called overflow which lets you decide how you want elements that contain elements wider or taller than them to behave. So you can solve this problem by simply making that element itself scroll instead of the entire page by using overflow: scroll, or hide the child elements by using overflow: hidden;.
You can also solve these problems by dealing with the child elements for example: using the word-wrap property to allow word wrapping, using the hyphens property to break words with hyphens, or in this case use the HTML wbr tag to allow line breaking after every underscore, or even cut the longer words and append three dots to them; so my user name would look like this: “Limitless_s…”.
Whats an overflow problem?
TL;DR: big elements cause annoying scroll-bars to appear.
My username is very big, so when I open this page on a mobile I get a horizontal scroll-bar for the entire page.
In CSS there’s a property called
overflowwhich lets you decide how you want elements that contain elements wider or taller than them to behave. So you can solve this problem by simply making that element itself scroll instead of the entire page by usingoverflow: scroll, or hide the child elements by usingoverflow: hidden;.You can also solve these problems by dealing with the child elements for example: using the
word-wrapproperty to allow word wrapping, using thehyphensproperty to break words with hyphens, or in this case use the HTMLwbrtag to allow line breaking after every underscore, or even cut the longer words and append three dots to them; so my user name would look like this: “Limitless_s…”.