Skip to main content
CSS is fun and cool and I like it.

Articles Tagged word-break

It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
3 Articles
{
,

}
Article

Where Lines Break is Complicated. Here’s all the Related CSS and HTML.

Avatar of Chris Coyier
Author
Chris Coyier
4 Comments
Go to Comments

Say you have a really long word within some text inside an element that isn’t wide enough to hold it. A common cause of that is a long URL finding it’s way into copy. What happens? It depends on the CSS. How that CSS is controlling the layout and what the CSS is telling the text to do.… Read article “Where Lines Break is Complicated. Here’s all the Related CSS and HTML.”

Snippet

Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)

Avatar of Chris Coyier
Author
Chris Coyier
65 Comments
Join Conversation

There are times when a really long string of text can overflow the container of a layout.

For example:

URL’s don’t typically have spaces in them, so they are often culprits.

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
… Read article “Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)”