The <wbr> is very useful tag but unfortunately even the most of experienced HTML designers do not know about it.

Let’s view how this tag can help us in HTML design.

Anybody knows how <br> tag works: it is a line break. And it is able to do wonders with clear="all" attribute ignoring even above floats.

Let we have a word containing from 100 (or 1000) symbols without spaces. How usual HTML page will appear? Of course, it will stretch in horizontal!

<wbr> tag covers this situation. Being inserted to the appropriate code segments, it makes the required breaks only if a word doesn’t fit its container.

For example:

So, <wbr> (word break) means that browser may insert a line break here. If the browser does not think a line break necessary nothing happens.

This tag is used with the <nobr> tag, <wbr> advises the extended browser when it may insert a line break in an otherwise nonbreakable sequence of text. Unlike the <br> tag, which always causes a line break, even within a <nobr>- tagged segment, the <wbr> tag works only when placed inside a <nobr>- tagged content segment and causes a line break only if the current line has already extended beyond the browser's display window margins.

For example:

This will produce a single line because of <wbr> tag. You can check it through online practice.

The WBR tag is supported by many versions of Internet Explorer (5.5, 6.0, 7.0, 8.0) and Safari (1.3, 2.0, 3.1)