word-break

The word-break property in CSS 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>).

Browser Support

This browser support data is from Caniuse, which also reports this feature is in W3C Working Draft status.

Desktop

Google ChromeMozilla FirefoxInternet ExplorerOperaApple Safari
43.55.510.3.1

Mobile / Tablet

iOS SafariAndroidOpera MobileAndroid ChromeAndroid Firefox
3.22.1105550

Safari and iOS support the break-all value but not keep-all

Comments

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

    chrome does not supported it.

    http://caniuse.com/css-hyphens

  3. User Avatar
    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. User Avatar
    Dave
    Permalink to comment#

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

  5. User Avatar
    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. User Avatar
    amit rajput
    Permalink to comment#

    note supported hyphens ie10

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

  9. User Avatar
    kranthi
    Permalink to comment#

    This code works for me wonderfully.

    white-space: pre-wrap; /* css-3 /
    white-space: -moz-pre-wrap; /
    Mozilla, since 1999 /
    white-space: -pre-wrap; /
    Opera 4-6 /
    white-space: -o-pre-wrap; /
    Opera 7 /
    word-wrap: break-word; /
    Internet Explorer 5.5+ */

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.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag