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+.

Comments

  1. 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. 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.

    • 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}”.

    • 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. Great thanks for that, I had been looking for a solution for word-break in FF for like an hour. Cheers

  7. 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. 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. 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. 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. 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

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".