Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Text Abbreviations, Addresses, and Citations

Fedor Andreev
Fedor Andreev
6,438 Points
Posted by Fedor Andreev
Fedor Andreev
6,438 Points

The <wbr> won't break down the text? Help?

I wrote a long text to make sure this tag has it's use. But when I entered <wbr> in between two word, it does not seem to work. Has HTML 5 abandoned this tag? This tag does seem to come from HTML 4.

1 Answer

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You didn't post any code so I'm not sure what your setup is. The <wbr> is meant to cause a word break and not to cause a break between two separate words. Also, this tag doesn't force a break it only gives the browser the option to break the word if it needs to.

This page should shed some light on how the <wbr> tag works. http://www.quirksmode.org/oddsandends/wbr.html

Take a look at the test boxes towards the bottom of the page. The "TestText" pairs act as one really long word.

Here's a snippet of some of the markup used there:

Test:
<br>
TestText
<wbr></wbr>
TestText
<wbr></wbr>
TestText
<wbr></wbr>
TestText
<wbr></wbr>

Notice that he has placed the <wbr> between every "TestText" pair but the browser does not break the word between every pair. It only honors the word break when it's reached the end of the box and there isn't enough room for another "TestText" pair to fit. So the majority of these wbr tags are ignored by the browser in this particular example.

If you removed all the wbr tags then you would have one really long line of text that would overflow the right side of the box and cause a horizontal scrollbar in the browser.

I hope that helps.