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:

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 word-break:

For hypens:

For overflow-wrap:

For text-overflow:

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.

See the Pen Figuring Out Line Wrapping by Chris Coyier (@chriscoyier) on CodePen.

More Resources

• Michael Scharnagl: Dealing with long words in CSS
• Kenneth Auchenberg: Word wrapping/hyphenation using CSS
• MDN: word-wrap, word-break, hyphens
• Spec: CSS Text Level 3

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