Coding with Jesse

Breaking Long URLs and Words

January 25th, 2007

Sometimes in your content you end up with some really long words or URLs that just won't wrap and end up screwing up the width of your content (especially in IE 6), or just running off the edge of the page.

Some common solutions involve automatically shortening the word or URL to a character limit and putting three dots "..." after it. But what if you want the whole URL or word to be visible?

I think the perfect solution is to have the URL wrap like words in a sentence, but how do you tell the browser to split the URL up?

The answer is to use <wbr/>, the Word Break tag. This gives the browser a spot where it can split the line up. For example:<wbr/>blog/2007/1/<wbr/>breaking-long-urls

This example gives the browser two places where it can break the URL and wrap the parts onto different lines:

Unfortunately, the <wbr/> tag doesn't work in all browsers, only Firefox and Internet Explorer. Via QuirksMode, Gordon Mohr suggests another solution using CSS which makes <wbr/> work in Opera:

wbr:after { content: "\00200B" }

This adds &#8203; after the <wbr/>, an entity that achieves the same effect in Opera and Safari.

Unfortunately, neither <wbr/> nor this CSS will work in Safari. You can try putting &#8203 directly into your HTML, but then you'll end up with weird squares in Internet Explorer 6. Don't you love browser compatibilities?

For more info, check out the QuirksMode page I mentioned above.


1 . Devon on January 26th, 2007


This is one of the few areas that Firefox actually annoys me, while everything else make me happy. If only Firefox would support the &shy; entity, life would be great. The soft break would be part of the content, and not the markup (which is where a soft break really belongs). It would allow for valid pages and never an excuse to leave code "broken". Even IE supports &shy;!

But alas...I must admit....this is one of those <em>exceptionally few</em> situations where even I (a validation junkie), admit that an invalid page <em>might</em> have a right to exist.

2 . lewis on February 4th, 2007


how do you come up with all these browser idiosyncrasies?!

3 . Martin Kliehm on February 16th, 2007

Martin Kliehm

The wbr element is not part of any standards specification. It's not even specified in working drafts of that rogue WHATWG group. It's tag soup invented by Netscape and copied by Microsoft.

If you want some non-semantic extra markup, I found this construct works:

exceptional<span class="break"> &nbsp;</span>longword

.break {
font-size: 1px;
line-height: 1px;
float:right !important;
float: none;

4 . Jesse Skinner on February 16th, 2007

Jesse Skinner

@Martin - Interesting, I had no idea it was non-standard. It explains why browser support is so scattered. Thanks for the clarification and additional suggestion.

5 . kaos_frack on November 13rd, 2008


alright, testing it on your site....

6 . kaos_frack on November 13rd, 2008


oops ;)

7 . test on December 7th, 2008



8 . atif on March 4th, 2009



9 . Jesse Skinner on March 4th, 2009

Jesse Skinner

You win atif.

BTW I don't use this line-breaking technique obviously ;)

10 . Zhiroc on August 26th, 2009


"The soft break would be part of the content, and not the markup (which is where a soft break really belongs)."

I'm not sure I agree. What is a soft break? A hint to the browser that if it wants to break the line, it can at that point. That sounds like markup to me, not content.

Comments are closed, but I'd still love to hear your thoughts.