Long URLs Causing Overflow In Chrome

PROBLEM
I’ve run into this issue a lot in Chrome since our site likes to use URLs for link text. Not a good practice in my opinion but whatever. The issue is when the URL is so long, the text cannot be broken.

Long URL Causing Overflow

This issue also happens on mobile devices. It will cause an overflow which makes the text run over causing a horizontal scroll, which is never good.

SOLUTION
Using just word-wrap: break-word sometimes doesn’t work in Chrome for some reason. I found that adding a max-width in whatever the container the long text is in will work. For example, my new CSS is:

ul.material_content_list li ul.blank_list li {
max-width:                    470px;
word-wrap:                    break-word;
}

Now the page looks fine:

URL Properly Broken & Not Overflowing

Leave a Reply

Your email address will not be published. Required fields are marked *