A full website URL shown on a page may not wrap. Instead acting like a sore thumb sticking out and in the way.
Sometimes I illustrate the full website address, shown as text, and linked, so that it may be copied, rather than showing it as some words.
For example I might illustrate the link to a web page as:
https://www.vntweb.co.uk/unused-domain-name-and-ip-addresses-for-documentation/
As opposed to the more usual worded, derived from the title, reference like this:
Domain Names and Addresses for Documentation
I often find that the default website configuration will cause the shown link to break out of its container, or force the container to grow.
Probably not such a problem on a desktop computer, but with the smaller devices this becomes more apparent.
No one wants the link sticking out beyond the right hand edge of the screen. This makes the site look untidy and poorly crafted. Also it’s a down mark for SEO ranking. It being marked as not designed for mobile.
The CSS which we wish to govern is word-wrap.
The CSS default for word-wrap is normal – allowing long words to be broken according to the accepted language rules.
However to force the long website URL to be broken this requires countermanding with break-word. Used in CSS as
word-wrap:break-word;
Check your ordering to ensure that this isn’t over-ridden. And ensure that white space nowrap is not set
word-wrap:nowrap;
As it’s possibly only the links which we wish to countermand, we can target them only. We don’t want to affect more of the website than required.
a{word-wrap:break-word;}
Or if the issue is only specific to the narrow sidebar area, with for example, a class of SidebarWrapper, we can be more specific:
.SidebarWrapper a{word-wrap:break-word;}
After all, the issue is that we are showing the whole link text, not the links as words which will wrap.
In short to break long link URLs – amend the website’s CSS to target the link’s white space, forcing the breaking of long website URLs.
