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

Question

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 wa

Answer 1

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;

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

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>

Answer 6

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.