Word BreakMany times, web browsers break up long words in ways that don't look very appealing. HTML5 introduced a new tag that allows web developers to help the browser decide where to break up words. The tag is <wbr> and stands for Word Break Opportunity. An important thing to remember about <wbr> is that it is a suggestion, not a rule. The browser can choose to ignore the tag if it wants to. In general, browsers will only insert word breaks when the word will not fit on a single line. If the browser does decide to break the word at the given tag, no hyphen is added. This is good for breaking up long numbers for example as no hyphenation is needed. Here is an example of the tag:
<html> <head> <title>Word Break Example</title> </head> <body> This is a long number: <wbr>234,928,347,<wbr>789,020,589,<wbr>120,009,293 </body> </html>Now let's look at how this code could be rendered.
The browser could choose to ignore the tags:
This is a long number: 234,928,347,789,020,589,120,009,293
Or the browser could choose to insert word breaks where you put the tags:
This is a long number:
Note: If you look at the source for this page, you won't see <wbr> tags in the above examples. This is because I use explicit new line tags to illustrate an example.