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

  28. Chris
    Permalink to comment#

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

  29. 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. 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. 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. Parkash
    Permalink to comment#

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

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

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

  35. Justin
    Permalink to comment#

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

  36. Justin
    Permalink to comment#

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

  37. 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. 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. Scott
    Permalink to comment#

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

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 triple backtick fences like this:

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

We have a pretty good* newsletter.