word-break

word-break is a property that can be used to change when line breaks ought to occur. Normally, line breaks in text can only occur in certain spaces, like when there is a space or a hyphen.

In the example below we can make the word-break between letters instead:

p {
  word-break: break-all;
}

If we then set the width of the text to one em, the word will break by each letter:

See the Pen Setting text vertically with word-break by CSS-Tricks (@css-tricks) on CodePen.

This value is often used in places with user generated content so that long strings don't risk breaking the layout. One very common example is a long copy and pasted URL. If that URL has no hyphens, it can extend beyond the parent box and look bad or worse, cause layout problems.

See the Pen Fixing links with word-break by CSS-Tricks (@css-tricks) on CodePen.

Values

  • normal: use the default rules for word breaking.
  • break-all: any word/letter can break onto the next line.
  • keep-all: for Chinese, Japanese and Korean text words are not broken. Otherwise this is the same as normal.

This property is also often used in conjunction with the hyphens property so that when breaks occur a hypen is inserted, as per the standard in books.

The full usage, with needed vendor prefixes, is:

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

Using these properties on the universal selector can be useful if you have a site with a lot of user generated content. Although fair warning, it can look weird on titles and pre formatted text (<pre>).

More Information

Chrome Safari Firefox Opera IE Android iOS
Yep Yep* Yep Yep Yep Yep Yep*

* these browsers support the break-all value but not keep-all

Comments

  1. Jiayang Shen
    Permalink to comment#

    It seems that “webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;”all has no effect. And is there hyphens property in the css specification?

  2. karma
    Permalink to comment#

    chrome does not supported it.

    http://caniuse.com/css-hyphens

  3. Antti
    Permalink to comment#

    Apparently IE10 supports prefixed hyphens property, so a more complete one would be:

     -ms-word-break: break-all;
         word-break: break-all;
    
    /* Non standard for webkit */
         word-break: break-word;
    
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
    
  4. Dave
    Permalink to comment#

    IE8 introduced -ms-word-break as a synonym for word-break. Don’t use the -ms- prefix.

  5. Rob
    Permalink to comment#

    Apparently the support in Firefox should be nope, instead of yep.
    Firefoc 41.0.2 on OSX 10.11 El Capitan does not show a linebreak in your example. Safari and Chrome do.

  6. amit rajput
    Permalink to comment#

    note supported hyphens ie10

  7. Shane

    The example above for hyphenation is incorrect.

    For Firefox to support automatic hyphenation the word-break behavior must be set to normal.
    word-break: normal

    Hyphenation is not supported in Chrome. You can break words in Chrome, without breaking Firefox by using the Chrome-specific notation word-break: break-word.

    Check out this codepen in both Firefox and Chrome

  8. Jared
    Permalink to comment#

    Is there a way to have a word wrap only if it overflows the line? Instead of just having every word at the end of the line break, regardless of length?

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.