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

Leave a Reply

Your email address will not be published. Required fields are marked *