What You will Learn in this HTML5 Lesson
This is the third-in-a-series of lessons on new HTML5 tags. This lesson will teach you how to make your text more readable by controlling how long words break.
Optional Word Break
The new <wbr> tag is a Optional Word Break. This is a conditional word break; it is only used when the word doesn’t fit into one line. It’s useful in cases where you want want to indicate, “only break it if you have to, and when you do, break it here”.
The <wbr> element tells a browser it may (but is not required to) break a word into two lines here if it needs somewhere to break a line.
Examples of Using Optional Word Breaks
You can improve the readability of your text by controlling where long words may hyphenate. For example, in a hyphenated phrase like “twenty-first century” you’d want to make sure the phrase didn’t break in an awkward location.
So, you could place the <wbr> tag in the spot you’d like it to break (when it has to).
You can add the word break tag in your preferred break location:
And now the browser will break the word like this:
Soft Hyphen Special Character
There is a special character code for a “soft hyphen” which only places the hyphen if it appears at the end of a line. This could be used with the preferred word break tag, so that long words break in comfortable spots, and also show a hyphen. Notice that just using the word break tag <wbr> doesn’t cause a hyphen to appear. That may be good in some cases. For example, to indicate a preferred break location in a long web address, the word break tag <wbr> would be ideal—you wouldn’t want an extra hyphen added to a web address.
But, if you would like to use the word break tag <wbr> to break a really long word, you could also add the soft hyphen special character code and the hyphen would appear as needed, only if the word broke at the end of the line.
superextra <wbr>­ califragalisticexpadotious