Two solutions that can help alleviate issues with responsive websites where, on some small screen sizes, text areas become too narrow for long words.
Email addresses are frequently long and are added to a narrow sidebar column where they have this issue.
We used to see them overflowing the content area, like so:
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:
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.
For long words simply add ­ 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:
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:
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.