Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML HTML Text Abbreviations, Addresses, and Citations

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

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.