Responsive Word Wrapping

The <wbr> tag is a relatively new tag designed to help alleviate issues with responsive websites where, on some small screen sizes, text areas become too narrow for long words.

Issue

Email addresses are frequently long and are added to a right sidebar column where they have this issue.

We used to see them overflowing the content area, like so:

Email address overflowing sidebar

But 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:

email wrapping each character in sidebar

The Fix

Fortunately, with the new Word Break Opportunity, <wbr> tag you can let the browser know where you’d like it to break the word.

You will have to edit the HTML source code.

Find the long word and simply add the tag in logical breaks, such as between syllables. 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<wbr>ltramicro<wbr>scopicsil<wbr>icovolcano<wbr>coniosis

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>

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.