Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Prevent Long URL’s From Breaking Out of Container

Or any long bit of text, really.

.comment-text {
  word-wrap: break-word;
}

A more robust browser support, you'll need more (via):

-ms-word-break: break-all;

     /* Be VERY careful with this, breaks normal words wh_erever */
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

The above works in Internet Explorer 8+, Firefox 6+, iOS 4.2, Safari 5.1+ and Chrome 13+.

For the Sass-inclined, you might put the basics into a @mixin you can easily call:

@mixin word-wrap() {
  word-break:     break-word;
  -webkit-hyphens: auto;
  -moz-hyphens:    auto;
  hyphens:         auto;
}

And on a related note, if you'd like to end a single line by hiding the overflow and having it end in a ... ellipsis, try this:

@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Comments

  1. Christian Hanvey
    Permalink to comment#

    Apparently, overflow-wrap is the new word-wrap as its been removed from the CSS3 spec. I just read about this only a couple of days ago, along with some other interesting proposed typographic properties:

    http://www.impressivewebs.com/new-css3-text-wrap/

    Worth noting: although word-wrap has been removed from spec there is no current browser support for the replacement property!

  2. Christian Hanvey
    Permalink to comment#

    But before you go rushing into changing all that word-wrap goodness you just added – from the spec: “For legacy reasons, UAs may also accept ‘word-wrap’ as an alternate name for the ‘overflow-wrap’ property.”

  3. agentsuperdave
    Permalink to comment#

    the surrounding element must have a specified width or your long url will still break out of the box.

  4. Zach Case
    Permalink to comment#

    You solved a problem I’ve been having. Awesome!

  5. Quentin
    Permalink to comment#

    Thanks agentsuperdave, this tip was extremely useful. For a table, that means you should use “table-layout: fixed” and specify widths for your tds.

    • TAKI1
      Permalink to comment#

      Quentin, I love you man, you saved my ass! ;)

      Btw. I didn’t declare width, just “table {table-layout: fixed; width: 100%}” and “table a {word-wrap: break-word}”.

    • TAKI1
      Permalink to comment#

      I didn’t declare “td” width, just…

    • Quentin
      Permalink to comment#

      Yeah, it works too. In my case I needed a different width for each column.

  6. Clinton Green
    Permalink to comment#

    Great thanks for that, I had been looking for a solution for word-break in FF for like an hour. Cheers

  7. Daniel Imms
    Permalink to comment#

    Your robust solution fixed my issue, my URL did not want to break while inside a table styled to be responsive (display:block). Cheers!

  8. kongu
    Permalink to comment#

    fix example from

     // Non standard for webkit
     word-break: break-word;
    

    to

     /* Non standard for webkit */
     word-break: break-word;
    
  9. Dave Merrill
    Permalink to comment#

    If these options dont’ give you enough control, see this question on SO, especially two of my answers (;-), http://stackoverflow.com/a/6298738/736006 and http://stackoverflow.com/a/6508168/736006.

  10. Dzumla
    Permalink to comment#

    Thanks man!

  11. Priyank Shrivastava

    I tried using this :

    // Given on the top post

     /* Non standard for webkit */
     word-break: break-word;
    

    -ms-word-break: break-all;
    word-break: break-all;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;

    but was not working.

    Until i added

    float:left and a width.

    Now it is working perfectly fine.

  12. Stig Bratvold

    I tried all these solutions and it works perfectly in Safari, Firefox and IE but it does not work in the newest Chrome.

    The one I ended up using now is this from the article:

    -ms-word-break: break-all;
         word-break: break-all;
    
         /* Non standard for webkit */
         word-break: break-word;
    
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;
    

    The article says it is supposed to work in Chrome. Does anyone know what the issue might be?

  13. Nathan
    Permalink to comment#

    Thanks this was really useful and helped me fix an issue with links not wrapping in the prefooter area of my Drupal site. You may be interested in checking out the result here in the third prefooter area: http://www.mtusesthis.com/

  14. Daniel
    Permalink to comment#

    This is wrapping every word, so even if I have say “teams” at the end of a line and it does not quite fit, the “s” is pushed to the next line. I only want words wrapped that are longer than the width of my div. Am I doing something wrong here? Is there something else I can do to achieve this? Thanks.

  15. Alejandro
    Permalink to comment#

    Awesome! It works like a charm ^.^, thanks for tip!

  16. krabat1
    Permalink to comment#

    And the too long email-adresses??

  17. Dave Merrill
    Permalink to comment#

    Really, for more control, check out the Stack Overflow posts I referred to above. Works very well, if js is an option.

  18. Marco Cascianelli
    Permalink to comment#

    Dave Merrill
    Permalink to comment# FEBRUARY 10, 2014
    Really, for more control, check out the Stack Overflow posts I referred to above. Works very well, if js is an option.

    Dave is right, and actually, js should be an option, since we’re talking about – essentially – aesthetics

  19. Charith
    Permalink to comment#

    Thanks Chris! I was scratching my head on this one!

  20. Massi
    Permalink to comment#

    Worked like a charm in FF, Chrome and Safari for me, didn’t check IE

  21. Dino

    I’m working with DocBook, it outputs to a PDF. My table’s cell’s content is not word wrapping with words that are long and have no spaces. I believe our css is a docbook_custom.xsl Where would I set these word wrap adn break statement?

  22. Chandra

    Very useful, indeed. Thank you.

  23. Sugarenia
    Permalink to comment#

    The fact that break-all breaks words in weird places was a no-no for me, so I removed it and instead added word-wrap: break-word.

    My mixin now looks like this:

    @mixin contain-text {
           word-break: break-word;
           word-wrap: break-word;
               -webkit-hyphens: auto;
           -moz-hyphens: auto;
           hyphens: auto;
    }
    

    It seems to be working OK in Chrome, Safari, Firefox, IE9-10, unless I’m missing something.

    • Adrien Be

      Your solution does seem to work better than the article’s solution. The problem I had was that the super long words were broken to the next line as expected but a smaller word that could fit on the next one would be also broken instead of simply be “pushed” to the next line.

      see the “bad” one (Chris’ solution), notice the “d” is cut: http://imgur.com/avo2kxS,i0aqqwX#1
      see the good one (Sugarenia’s solution): http://imgur.com/avo2kxS,i0aqqwX

    • Leszek
      Permalink to comment#

      Thanks! Was looking for it.

  24. Chris
    Permalink to comment#

    great! pointed me in the right direction when encountering a layout issue due to long words / strings / text. thanks.

  25. Leif
    Permalink to comment#

    PHP and HTML5 to the rescue:

    $url = str_replace(‘/’,’/<WBR>’,htmlentities($url))

    of course, don’t do this to the url in the HREF, just the one that is displayed.

  26. JC
    Permalink to comment#

    Thanks a lot for the tip. Worked using a long word within %width table

  27. Jay2k1
    Permalink to comment#

    Thank you very much. I have a table that spans 100% screen width, the first two columns contain timestamps and nicknames (the latter being of variable width) and the third contains text and should fill the available space. Long URLs however kept adding a horizontal scroll bar because they extended the table beyond 100% screen width. Your CSS made the text column wrap text exactly when it should, not more (break between any two characters) or less (live with horizontal scrolling). Thank you.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```