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?
13 Answers
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.
-
31Why is this not accepted? This answer is more helpful for the majority of users. The CJK behaviour only applies to very international websites.– MarioDSMay 6, 2014 at 14:25
-
3Short but sweet answer! Though you might want to change word-wrap to overflow-wrap? Jul 7, 2015 at 14:39
-
5@MarioDS it applies to "very international websites" or, as 20% of the world calls them, "websites"– freganteNov 29, 2016 at 13:16
-
1@GauravAgarwal: should be noted that IE (even in the latest version) still relies on the legacy name. See caniuse.com/#search=overflow-wrap Dec 7, 2016 at 10:55
-
2"accepted answer" symbol is related for the asker only, relevant for the correctness of the answer when it was relevant to her/him at that time, that's all. Users are not expected to go back to their questions after couple of years and review new answers. Votes count on answer show the community "accepted answer".– elpddevJun 7, 2017 at 10:11
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.
-
35Also note that word-wrap is a legacy name for the newer property "overflow-wrap" in the specification. w3.org/TR/css3-text/#overflow-wrap Mar 12, 2013 at 17:17
-
13Simply put: "
word-break
specifies soft wrap opportunities between letters…" The W3C spec uses CLK text as an example, but that is not its sole intended use. It is common to useword-break
in conjunction with long strings (such as URLs or lines of code) when you want them to break at the container width — especially if the container is apre
element or table cell where theword-wrap
property may not work as expected.– gfullamJun 2, 2015 at 18:50 -
1Because the spec only uses the Asian languages as an example, not as the sole intended purpose of the property (as described by gfullam as well) which seems to be the main conclusion of this answer nonetheless. Sep 28, 2016 at 18:28
-
4word-wrap: break-word -> wont break table ---- word-break: break-all -> breaks tables Oct 24, 2017 at 23:10
-
1Note that the W3C link that @squareman mentioned is now w3.org/TR/css-text-3/#overflow-wrap-property Jun 26, 2019 at 18:26
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.
-
2Is this still the case if u use
break-word
. I annoyingly found thatword-break
breaks urls but notword-wrap
. Both usingbreak-word
got it from css-tricks.com/snippets/css/… May 19, 2014 at 3:22
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.
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.
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.
-
5Excellent explanation. One example that I ran into just now: long words in a table cell.
overflow-wrap
/word-wrap
did not make them wrap. Presumably because table cells without a fixed width expand instead of overflow. Instead, the table got wide and collided with other elements.word-break
on the other hand fixed it.– Henrik NJan 20, 2017 at 13:26 -
@HenrikN
table-layout: fixed;
(possibly together withwidth
/max-width
) can make it work withoverflow-wrap/word-wrap
but it depends on the specific use case; just likeword-break
might not be what you want.– phkAug 18, 2017 at 14:18
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.
-
6You can use
table-layout:fixed
to make the table not expand when usingword-wrap:break-work
– veksenJan 13, 2014 at 17:13 -
@vesken I couldn't get that to work (in Firefox 26). Could you provide an updated version of my jsfiddle linked above to demonstrate what you mean? Jan 15, 2014 at 13:55
-
3I got it to work by adding a width on the table, either 100%, or move the 80px width of the container to the table. jsfiddle.net/SDGAX/37 The behavior of the table is however not the same using
table-layout:fixed
– veksenJan 15, 2014 at 16:46 -
2This behavior also happens when using
word-wrap
in conjunction withpre
tags in Firefox unless they have a fixed width defined. Usingword-break
produces the desired result. I linked to this answer in a comment posted above because it demonstrates a common use case.– gfullamJun 2, 2015 at 18:57 -
Also display-inline elements with no width don't get affected by "word-wrap", but "word-break" still works.– tfEJan 26, 2017 at 15:16
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.
-
Thank you for this as I was looking for the difference between
word-wrap
&word-break
which can both have the valuebreak-word
– ChadJul 20, 2017 at 18:29
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
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.