Grow your CSS skills. Land your dream job.

word-break

Last updated on:

p {
  word-break: normal | break-all | keep-all;
}

Normally, line breaks in text can only occur in certain spaces, like when there is literally a space or a hyphen. When you set word-break to break-all, line breaks can occur between any character. Resulting in, for example:

Perform
ance

(if that word wouldn't quite fit into its parent container width)

It's often used in places with user generated content so that long strings don't risk breaking 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.

It 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

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

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

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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