What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS

I am currently wondering what is the difference between the two. When I used both they seem to break the word if it is not fitting the container. But why did W3C made two ways to do it?

word-wrap: break-word recently changed to overflow-wrap: break-word

• will wrap long words onto the next line.
• adjusts different words so that they do not break in the middle.

word-break: break-all

• irrespective of whether it’s a continuous word or many words, breaks them up at the edge of the width limit. (i.e. even within the characters of the same word)

So if you have many fixed-size spans which get content dynamically, you might just prefer using word-wrap: break-word, as that way only the continuous words are broken in between, and in case it’s a sentence comprising many words, the spaces are adjusted to get intact words (no break within a word).

And if it doesn’t matter, go for either.

The W3 specification that talks about these seem to suggest that word-break: break-all is for requiring a particular behaviour with CJK (Chinese, Japanese, and Korean) text, whereas word-wrap: break-word is the more general, non-CJK-aware, behaviour.

With word-break, a very long word starts at the point it should start and it is being broken as long as required

[X] I am a text that 0123
4567890123456789012345678
90123456789 want to live 
inside this narrow paragr
aph.

However, with word-wrap, a very long word WILL NOT start at the point it should start. it wrap to next line and then being broken as long as required

[X] I am a text that 
012345678901234567890123
4567890123456789 want to
live inside this narrow 
paragraph.

word-wrap has been renamed to overflow-wrap probably to avoid this confusion.

Now this is what we have:

overflow-wrap

> The overflow-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.

Possible values:

• normal: Indicates that lines may only break at normal word break points.

• break-word: Indicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

source.

word-break

> The word-break CSS property is used to specify whether to break lines within words.

• normal: Use the default line break rule.
• break-all: Word breaks may be inserted between any character for non-CJK (Chinese/Japanese/Korean) text.
• keep-all: Don't allow word breaks for CJK text. Non-CJK text behavior is the same as for normal.

source.

---

Now back to your question, the main difference between overflow-wrap and word-break is that the first determines the behavior on an overflow situation, while the later determines the behavior on a normal situation (no overflow). An overflow situation happens when the container doesn't have enough space to hold the text. Breaking lines on this situation doesn't help because there's no space (imagine a box with fix width and height).

So:

• overflow-wrap: break-word: On an overflow situation, break the words.
• word-break: break-all: On a normal situation, just break the words at the end of the line. An overflow is not necessary.

At least in Firefox (as of v24) and Chrome (as of v30), when applied to content in a table element:

word-wrap:break-word

will not actually cause long words to wrap, which can result in the table exceeding the bounds of its container;

word-break:break-all

will result in words wrapping, and the table fitting within its container.

jsfiddle demo.

There's a huge difference. break-word will only break words that don't fit the container. While break-all will ruthlessly try to max the amount of chars per row and will ruthlessly cause "unnecessary word-breaks" which looks horrible IMO.

Example

Rendering the string This is a text from an old magazine in a monospace font inside a container which is 6 chars wide.

With word-break: break-all most words are broken and it looks unredable:

This i
s a te
xt fro
m an o
ld mag
azine

What break-all does is to go row-by-row and just put 6 characters on each row until there are none remaining. It will do this ruthlessly, even two-letter-words like "is" can be divided into 2 rows. This looks absolutely terrible and I would never use it to render text.

With word-wrap: break-word only the long words get broken:

This is a text from an old magazi ne

What break-word does is much nicer. It only breaks words that could never fit the width of the container. Words that can't fit on the current row are simply pushed to the next row. So in this case with a container that fits 6-chars-per-row it has to break an 8 char word like "magazine" but it would never break a shorter word like "text".

<div style="width: 100px; border: solid 1px black; font-family: monospace;">
  <h1 style="word-break: break-all;">This is a text from an old magazine</h1>
  <hr>
  <h1 style="word-wrap: break-word;">This is a text from an old magazine</h1>
</div

This is all i can find out. Not sure if it helps, but thought I'd add it to the mix.

WORD-WRAP

This property specifies whether the current rendered line should break if the content exceeds the boundary of the specified rendering box for an element (this is similar in some ways to the ‘clip’ and ‘overflow’ properties in intent.) This property should only apply if the element has a visual rendering, is an inline element with explicit height/width, is absolutely positioned and/or is a block element.

WORD-BREAK

This property controls the line breaking behavior within words. It is especially useful in cases where multiple languages are used within an element.

word-break:break-all :

word to continue to border then break in newline.

word-wrap:break-word :

At first , word wrap in newline then continue to border.

Example :

div {
   border: 1px solid red;
   width: 200px;
}

span {
  background-color: yellow;
}

.break-all {
  word-break:break-all;
 }
.break-word {
  word-wrap:break-word;  
}

<b>word-break:break-all</b>

<div class="break-all">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

<b> word-wrap:break-word</b>

<div class="break-word">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

From the respective W3 specifications —which happen to be pretty unclear due to a lack of context— one can deduce the following:

• word-break: break-all is for breaking up foreign, non-CJK (say Western) words in CJK (Chinese, Japanese or Korean) character writings.
• word-wrap: break-word is for word breaking in a non-mixed (let us say solely Western) language.

At least, these were W3's intentions. What actually happened was a major cock-up with browser incompatibilities as a result. Here is an excellent write-up of the various problems involved.

The following code snippet may serve as a summary of how to achieve word wrapping using CSS in a cross browser environment:

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

In addition to the previous comments browser support for word-wrap seems to be a bit better than for word-break.

The definitions alone of word-break and word-wrap can easily make your head spin, but when comparing these two, specifically, it's much easier to think of them like this:

First of all you would probably like to use overflow: auto; as well, and you might want to try what using that alone looks like: if you can tolerate needing to scroll the text in the container rather than having arbitrary wrap positions, it might be just what you need.

Then keep in mind that in this context, a "word" is a string with no whitespaces in it.

word-break: break-all; Prioritizes minimizing the space wasted while avoiding overflow, before keeping any words unbroken, so it never wraps anywhere but at the right margin. It even replaces line breaks with spaces in the contained text. This is useful if you want to avoid scrolling as much as possible and use a container that is enough wide for readability: however if your container is too narrow the result is in general not very satisfying, as Drkawashima noted.

word-wrap/overflow-wrap: break-word; Prioritizes keeping any and all words unbroken while avoiding overflow, so if a word is too long to fit on the rest of the line, it wraps first and tries to fit the rest of the text on the next line even if it means leaving the line above as short as only one single character. This is useful if you want maximum readability while avoiding scrolling as much as possible and use a container that is enough wide: otherwise you might want to use only overflow: auto in stead.

Regarding word-wrap, it isn't really replaced(and maybe also more universally recognized then overflow-wrap by the browsers in use worldwide): it became an alias for overflow-wrap because all the big browsers and many many webpages had already adopted word-wrap although originally not being defined in the standards. However, because of the widespread use it wasn't discarded when overflow-wrap was defined but rather defined as the alias it is today, and for legacy reasons, UAs(User-Agents, e.g web browsers) must treat word-wrap as a legacy name alias of the overflow-wrap property. So it has become a de facto standard of W3C and it isn't going away any day soon (perhaps when the W3C standard becomes extinct or the entire web is universally updated by bots with AI).

https://www.w3.org/TR/css-text-3/#overflow-wrap-property

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

overflow-wrap: break-word;

Reference

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line.

Difference between the “word-break: break-all;” and “word-wrap: break-word;”

word-break: break-all; It is used to break the words at any character to prevent overflow. word-wrap: break-word; It is used to break the words at arbitrary points to prevent overflow.