SPECIFY SAFE LINE BREAKS IN LONG WORDS

The wbr element, new in HTML5, enables you to specify a word-break opportunity so that long words can span multiple lines. This has a slightly different execution from the soft-hyphen character, &shy;, introduced in HTML 4. Whereas the <wbr> tag will just break up a long word, the &shy; code will also insert a hyphen before the line break.

When either is used, you can specify where the browser should wrap a word onto the next line of text if the word is longer than the available space on the line. Ideally, place it in between syllabic breaks. This helps the word remain legible when broken up, such as

Hippopoto<wbr>monstrosesquip<wbr>
 pediliophobia

When split across multiple lines with spacing for 30 characters, ...

Get HTML5: Your visual blueprint™ for designing rich web pages and applications now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.