What is the difference between “word-break: break-

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 ways to do it?

Answer 1

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 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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.

Answer 6

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>