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.
There's a huge difference. break-all
is basically unusable for rendering readable text.
Let's say you've got the string This is a text from an old magazine
in a container which only fits 6 chars per row.
word-break: break-all
This i
s a te
xt fro
m an o
ld mag
azine
As you can see the result is awful. break-all
will try to fit as many chararacters into each row as possible, it will even split a 2 letter word like "is" onto 2 rows! It's ridiculous. This is why break-all
is rarely ever used.
word-wrap: break-word
This
is a
text
from
an old
magazi
ne
break-word
will only break words which are too long to ever fit the container (like "magazine", which is 8 chars, and the container only fits 6 chars). It will never break words that could fit the container in their entirety, instead it will push them to a new line.
<div style="width: 100px; border: solid 1px black; font-family: monospace;">_x000D_
<h1 style="word-break: break-all;">This is a text from an old magazine</h1>_x000D_
<hr>_x000D_
<h1 style="word-wrap: break-word;">This is a text from an old magazine</h1>_x000D_
</div
_x000D_
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.
In addition to the previous comments browser support for word-wrap
seems to be a bit better than for word-break
.
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 {_x000D_
border: 1px solid red;_x000D_
width: 200px;_x000D_
}_x000D_
_x000D_
span {_x000D_
background-color: yellow;_x000D_
}_x000D_
_x000D_
.break-all {_x000D_
word-break:break-all;_x000D_
}_x000D_
.break-word {_x000D_
word-wrap:break-word; _x000D_
}
_x000D_
<b>word-break:break-all</b>_x000D_
_x000D_
<div class="break-all">_x000D_
This text is styled with_x000D_
<span>soooooooooooooooooooooooooome</span> of the text_x000D_
formatting properties._x000D_
</div>_x000D_
_x000D_
<b> word-wrap:break-word</b>_x000D_
_x000D_
<div class="break-word">_x000D_
This text is styled with_x000D_
<span>soooooooooooooooooooooooooome</span> of the text_x000D_
formatting properties._x000D_
</div>
_x000D_
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.
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;
word-wrap: break-word
recently changed to overflow-wrap: break-word
word-break: break-all
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.
word-wrap
has been renamed to overflow-wrap
probably to avoid this confusion.
Now this is what we have:
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.
The word-break CSS property is used to specify whether to break lines within words.
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.Source: Stackoverflow.com