Since the columns that contain content on your website will shrink and re-size as it’s viewed on different screen sizes there are sometimes issues with where words break. Long words can be particularly troublesome in columns that shrink to become too narrow for long words.
Automatic Hyphenation
Most of our newer websites have automatic hyphenation enabled. Which means the browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. In some cases you may not be happy with how or where the word wraps.
Below are some options you can experiment with to try to fix word wrapping and spacing issues but be sure to review your content on numerous devices sizes.
Issue
A frequent culprit for long words is email addresses, especially when they are added to a narrow sidebar column. It used to be common for them to overflow the content area, like so:
On most websites, we added code to force words to wrap. So, now we see each character wrapping to the next line as the area gets smaller, like so:
Unfortunately, it will sometimes break at confusing part of the word or email address.
The Fix
Fortunately, you can let the browser know where you’d like it to break the word and if you want a hyphen or not. For both solutions you will have to edit the HTML source code.
Soft Hyphen, ­
For long words simply add the Unicode encoding for the soft hyphen: ­
Add it in the source code at logical breaks, such as between syllables. If the word breaks at the end of a line, a hyphen will be added. Hopefully, you won’t have any articles about pneumonoultramicroscopicsilicovolcanoconiosis but if you do you will probably want to edit the source code, like so:
pneumonou­ltramicro­scopicsil­icovolcano­coniosis
Word Break Opportunity, <wbr> tag
The tag <wbr> does the same thing but will not add a hyphen. In the email example, it’s important not to add the <wbr> tag to the email link, only add it to the text displayed on the screen, like so:
<a href=”mailto:infoandadmissions@austin.utexas.edu”>
info<wbr>and<wbr>admissions@<wbr>austin.<wbr>utexas.<wbr>edu</a>
Another Issue
If you are experience content that is not breaking as expected it could be because of a non-breaking space Unicode in the Source code.
Non Breaking Space,
Similar to the ­ Unicode encoding above, is a code string that creates what appears to be a blank space but it encoded as a character. The browser treats the space as part of the word. Usually, instances of this are added in content that has been copy/pasted in and it is best to remove them from the source code. However, there are a few instances when it may be helpful to add, especially if you’re trying to get two areas to respond similarly.
Learn More
Article gets into the code options for Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc). Specifics and more examples of the <wbr> tag on the Mozilla developer site. Also see https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens.
