Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)

There are times when a really long string of text can overflow the container of a layout.

For example:

URL's don't typically have spaces in them, so they are often culprits.

Here's a big snippet with all the CSS players involved:

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

That would fix the issue for us:

Here's the scoop:

  • overflow-wrap: break-word; makes sure the long string will wrap and not bust out of the container. You might as well use word-wrap as well because as the spec says, they are literally just alternate names for each other. Some browsers support one and not the other. Firefox (tested v43) only supports word-wrap. Blink (tested Chrome v45) will take either one.
  • With overflow-wrap in use all by itself, words will break kinda anywhere they need to. If there is an "acceptable break" character (like a literal dash, for instance), it will break there, otherwise it just does what it needs to do.
  • You might as well use hyphens as well, because then it will try to tastefully add a hyphen where it breaks if the browser supports it (Blink doesn't at time of writing, Firefox does).
  • word-break: break-all; is to tell the browser that it's OK to break the word wherever it needs to. Even though it kinda does that anyway so I'm not sure in what cases it's 100% necessary.

If you want be more manual with hyphens, you can suggest them in your markup. See more on the MDN page.

Browser support for hyphens

According to Can I Use:

Chrome Safari Firefox Opera IE Edge Android iOS
Nope 8+ 38+ Nope 10+ Yep Nope 7.1+

Preventing Overflow with Ellipsis

Another approach to consider is truncating the text altogether and adding ellipses where the string of text hits the container:

.ellipses {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

This nice thing about using text-overflow is that it is supported universally.

Examples

See the Pen Hyphenate Long Words by CSS-Tricks (@css-tricks) on CodePen.

See the Pen Ellipses by CSS-Tricks (@css-tricks) on CodePen.

More Resources

For the SCSS-inclined

These tend to be the kind of things you sprinkle into code where needed, so they make for nice @mixins:

@mixin word-wrap() {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Comments

  1. User Avatar
    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. User Avatar
    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. User Avatar
    agentsuperdave
    Permalink to comment#

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

  4. User Avatar
    Zach Case
    Permalink to comment#

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

  5. User Avatar
    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.

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

    • User Avatar
      TAKI1
      Permalink to comment#

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

    • User Avatar
      Quentin
      Permalink to comment#

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

  6. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Dzumla
    Permalink to comment#

    Thanks man!

  11. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Alejandro
    Permalink to comment#

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

  16. User Avatar
    krabat1
    Permalink to comment#

    And the too long email-adresses??

  17. User Avatar
    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. User Avatar
    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. User Avatar
    Charith
    Permalink to comment#

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

  20. User Avatar
    Massi
    Permalink to comment#

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

  21. User Avatar
    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. User Avatar
    Chandra

    Very useful, indeed. Thank you.

  23. User Avatar
    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.

    • User Avatar
      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

    • User Avatar
      Leszek
      Permalink to comment#

      Thanks! Was looking for it.

  24. User Avatar
    Chris
    Permalink to comment#

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

  25. User Avatar
    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. User Avatar
    JC
    Permalink to comment#

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

  27. User Avatar
    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.

  28. User Avatar
    Chris
    Permalink to comment#

    If all these suggestions fail, make sure your long text is NOT affected by { white-space: nowrap } (facepalm)

  29. User Avatar
    Peter Foti
    Permalink to comment#

    Ellipsis works for single-line truncating. However, there’s not yet a good way to truncate multi-line elements. For example, suppose you text that spans 3 (or more) lines, but you want to allow up to 2 lines of text before displaying the ellipsis. There’s no good way to do this.

  30. User Avatar
    Peter Foti
    Permalink to comment#

    I had seen that already, but as you wrote in that article: “There are a couple of ways to get it done, none of them spectacular.” I was going to look at the Clamp.js way, but the example in your article seems to not be working, and that deterred me from investigating further. I just wish there was a standard way for doing this.

  31. User Avatar
    Paul Wallas
    Permalink to comment#

    It’s worth noting that Chrome behaves differently to IE 11 and Edge when using on inline elements within a table.

    Chrome works as expected however IE 11 and Edge require the mixin class to be applied to the ‘td’ itself

  32. User Avatar
    Parkash
    Permalink to comment#

    Hyphenation is a good technique. While Ellipsis has cross-browser issues.

  33. User Avatar
    Dave Murray
    Permalink to comment#

    I always end up coming to this site about 90% of the time for WORKING css answers. It pisses me off to no end how many other sites give advice and their solutions don’t work. StackOverflow is the biggest culprit. Very good stuff on wrapping long text. We will be using it at our site.

  34. User Avatar
    Henning

    @Dave Murray: so TRUE :D
    Nice Mixins, awesome!

  35. User Avatar
    Justin
    Permalink to comment#

    Only thing that works for me in all browsers is
    word-break: break-word;

  36. User Avatar
    Justin
    Permalink to comment#

    Doh, sorry, typo. Make that
    word-break: break-all;

  37. User Avatar
    le hollandais volant
    Permalink to comment#

    When using flex, it will sometimes not work.

    You will need to use

    min-width: 0;
    

    On the block, in addition of the break-word rules.

  38. User Avatar
    Johnny Rukavina
    Permalink to comment#

    Per this CodePen:

    http://codepen.io/anon/pen/YWZWJV

    I can’t get a url only to wrap in a table cell in IE. As noted here:

    Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)

    IE expects the css to be applied to the td and/or the table, which wraps all of the text therein, not just the url. Does anybody know a way around this?

  39. User Avatar
    Scott
    Permalink to comment#

    Perfect solution. The break-word vs break-all was killing me, in a dynamically sized div with display:table-cell;

  40. User Avatar
    Liam
    Permalink to comment#

    Works brilliantly. Just used it like this on a new web site with a long email address.

    a[href^="mailto:"]
    {
      overflow-wrap: break-word;
      word-wrap: break-word;
      -ms-word-break: break-all;
      word-break: break-all;
      word-break: break-word;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto;
    }
    
  41. User Avatar
    Huy
    Permalink to comment#

    This is awesome! Thanks for your work Chris!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag