• Breaking Long URLs and Words

    Jan 25 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:


    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.

  • Comments

    1. Devon at 2:17am on January 26, 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 at 11:02am on February 4, 2007

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

    3. Martin Kliehm at 1:44pm on February 16, 2007

    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 at 1:48pm on February 16, 2007

    @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 at 7:46am on November 13, 2008

    alright, testing it on your site....

    6. kaos_frack at 7:47am on November 13, 2008

    oops ;)

    7. test at 9:53am on December 7, 2008


    8. atif at 8:20am on March 4, 2009


    9. Jesse Skinner at 8:22am on March 4, 2009

    You win atif.

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

    10. Zhiroc at 8:30pm on August 26, 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.

    Commenting is now closed. Come find me on Twitter.