What´s the exact difference between overflow-wrap
/word-wrap
and word-break
?
And can anybody tell me what´s the better one for breaking very long links? Most people say you should use word-break in combination with overflow-wrap
but it doesn't look very logical. I think using overflow-wrap
in combination with word-wrap
for better cross-browser support is the best method. What do you think?
-
7To any future readers who might be initially confused as to why this was closed as a duplicate question. The [CSS Text Module Level 3](https://www.w3.org/TR/css-text-3/#overflow-wrap-property) states that `overflow-wrap` and `word-wrap` should be 100% identical in functionality. Personally, I get the impression that `word-wrap` should only be used for legacy browser support and that it might be deprecated or dropped in a future version of CSS. – Tyler Crompton May 29 '16 at 20:52
-
39To the ones who voted to close this: this is not a duplicate as stated, the question is not the same. The alleged duplicate is about two specific values of the two properties and this question is about the two properties. I really dislike that some people believe to have the right to forbid others answering a question. If you don’t like a question, just don’t read it! – Hibou57 Sep 12 '17 at 12:53
-
5@Tyler Crompton You are confusing `word-wrap` with `word-break` – catamphetamine Mar 19 '19 at 07:41
-
4I agree with Hibou57. This is not a duplicate. It's unfortunate it's closed since it's difficult to find an answer to this question online. – Paul-Hebert Jun 13 '19 at 19:42
-
1@TylerCrompton This question is not about `word-wrap`. This is about `word-break`. Closing this as duplicate question doesn't make sense. – Lone Learner Jun 16 '19 at 11:23
-
@LoneLearner, this was asked over three years ago. What you said has already been stated in the most upvoted comment. Additionally, there is already an accepted answer anyway. Please don't necro questions unnecessarily. – Tyler Crompton Jul 05 '19 at 22:29
-
@TylerCrompton The accepted answer only quotes another source without really going into a discussion on how they are different and what kind of different behavior `word-wrap` would produce compared to `overflow-wrap`. Like the highest voted comment to the answer mentions, "What a non-answer." – Lone Learner Jul 18 '19 at 14:48
-
@LoneLearner, I agree that I and the other voters improperly closed this question. I also agree that the accepted answer doesn't answer the question. However, this question is over six years old. If you still feel that this question deserves to be reopened, then please cast a reopen vote. If I notice that the question has been reopened, then I will gladly answer it. – Tyler Crompton Jul 31 '19 at 16:29
5 Answers
Quoting from source
overflow-wrap: The overflow-wrap CSS 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.
word-wrap: The
word-wrap
property was renamed tooverflow-wrap
in CSS3.word-break: The word-break CSS property is used to specify how (or if) to break lines within words
So, you need word-break in combination with word-wrap, which is the right combination.

- 35,956
- 47
- 141
- 220

- 97,368
- 26
- 197
- 188
-
Well, yes `word-wrap` is sufficient, but if the container width is limited, the layout could be messed up. – karthikr Jun 23 '13 at 11:17
-
OK, I see. I use word-wrap only for links, so the layout doesn´t break. – Anselm Jun 23 '13 at 11:21
-
7Found an answer: "The W3 specification that talks about these seem to suggest that word-break: break-all is for requiring a particular behaviour with CJK text, whereas word-wrap: break-word is the more general, non-CJK-aware, behaviour." (http://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break) CJK is a collective term for Chinese, Japanese, and Korean. – Anselm Jun 23 '13 at 11:36
-
Oh. but I thought your question was entirely different. Anyways, glad you found your answers, and I trust i was of help a little bit – karthikr Jun 23 '13 at 11:38
-
5word-wrap is an obsolete Microsoft extension (even if it was implemented as an unprefixed property by most browsers) and has now been replaced by overflow-wrap. MDN merged the two different pages into a single one: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap – CharlesM Apr 13 '18 at 09:46
-
@Marzian `word-wrap` was created by Microsoft but is now part of the spec alongside `overflow-wrap`. All browsers implement both and they both do the same thing. If you want the largest compatibility use `word-wrap` or both. – moefinley May 01 '18 at 13:21
-
5There is no example here and I don't see how this answer really explains the difference between `overflow-wrap` and `word-break`. – john c. j. Mar 20 '21 at 17:09
-
2Please elaborate on this. It's not a clear answer. The way you put it, it seems like `word-wrap` and `word-break` are the exact same thing. – cbdeveloper Jan 12 '22 at 16:35
It helps to understand that at this point, word-break: break-word
is really an alias for overflow-wrap: anywhere
.
word-break: break-word
is officially deprecated; see the CSS Text Module Level 3 Working Draft:
For compatibility with legacy content, the
word-break
property also supports a deprecatedbreak-word
keyword. When specified, this has the same effect asword-break: normal
andoverflow-wrap: anywhere
, regardless of the actual value of the overflow-wrap property.
The thing to note here is that word-break: break-word
is an alias for overflow-wrap: anywhere
, NOT an alias for overflow-wrap: break-word
.
(word-break: normal
is just the default value for word-break
, so you can ignore it unless you're setting a different value for word-break
.)
How do overflow-wrap: anywhere
and overflow-wrap: break-word
differ?
The only difference in the documentation between the two is that overflow-wrap: anywhere
DOES "consider soft wrap opportunities introduced by the word break" when it is "calculating min-content intrinsic sizes", while overflow-wrap: break-word
does NOT.
I guess widths might be more accurate in some cases if it is considering them?

- 6,788
- 2
- 45
- 55
Here are the exact differences: (based on testing in Chrome v81, and confirming my observations by referencing the spec)
white-space
normal
(default): collapses whitespace-chains and line-breaks; adds line-breaks where needed
nowrap
: collapses whitespace-chains and line-breaks; doesn't add line-breaks
pre-line
: collapses whitespace-chains; adds line-breaks where needed
pre-wrap
: no collapsing; adds line-breaks where needed
break-spaces
: same as pre-wrap, except with spaces able to trigger line-break-adding
pre
: no collapsing; doesn't add line-breaks
Note: If the selected white-space
value lists "doesn't add line-breaks", the line-break behavior of the following properties is unable to be applied (ie. ignored).
word-break
normal
(default): breaks line at end of last word fitting within container [if one exists], else line left unbroken
break-word
: breaks line at end of last word fitting within container [if one exists], else at end of container
break-all
: breaks line at end of container [can split a word, even with nearby whitespace]
overflow-wrap (legacy name: word-wrap)
normal
(default): breaks line at end of last word fitting within container [if one exists], else line left unbroken
break-word
: breaks line at end of last word fitting within container [if one exists], else at end of container [if in non-flex container], else line left unbroken
anywhere
: breaks line at end of last word fitting within container [if one exists], else at end of container [so same as word-break: break-word
]
Note that for overflow-wrap: break-word
(as for any combination that leaves lines too long for the container), the unbroken line can cause a flex container to expand beyond the flex ratio specified (forcing other flex containers to shrink to account for the too-long content).

- 15,624
- 10
- 70
- 96
-
based on the fact you said "based on docs" I'm assuming this content is largely copied from somewhere? SO typically frowns on content that is just a pure copy of content elsewhere, but either way you *must* cite sources when copying content to avoid plagiarism. Also, testing in Chrome is hardly reliable as a source for whether something is compliant with how the spec says it. – TylerH May 18 '20 at 21:02
-
3@TylerH It's not (even close to) a pure copy of content elsewhere. Most of the behavior descriptions were from my direct testing in Chrome, with the referencing of doc pages just to confirm that the behavior I observed was aligned with the spec, and to be sure I wasn't missing additional behavior. A far cry from plagiarism. (I'll update the note at the top to clarify) – Venryx May 18 '20 at 22:41
-
2For a true serious and patient reader who really wants to understand everything, this is the best answer. Thanks so much. – ZYinMD Nov 24 '20 at 04:46
I tried all the values to better understand how they affect the final result and this is what I got:
overflow-wrap
(ex. word-wrap
):
/*Set dimensions*/
div {
height: 200px;
width: min-content;
max-width: 9em;
}
/*Set overflow-wrap*/
div#normal { overflow-wrap:normal; }
div#break-word { overflow-wrap:break-word; }
div#anywhere { overflow-wrap:anywhere; }
div#anywhere-wo-mincontent { overflow-wrap:anywhere; width: unset; }
/*Set other*/
body { display: flex; }
div { border: 1px solid; display: inline-block; margin: 30px; }
code { text-decoration: underline; }
<div id=normal><code>overflow-wrap:normal</code><br>Most words are short & don't need to break. But Antidisestablishmentarianism is long.
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>
<div id=break-word><code>overflow-wrap:break-word</code><br>Most words are short & don't need to break. But Antidisestablishmentarianism is long.
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>
<div id=anywhere><code>overflow-wrap:anywhere</code><br>Most words are short. But Antidisestablishmentarianism is long.
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>
<div id=anywhere-wo-mincontent><code>overflow-wrap:anywhere</code><br>Most words are short & don't need to break. But Antidisestablishmentarianism is long.
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>
/*Set dimensions*/
div {
height: 200px;
width: min-content;
max-width: 9em;
}
/*Set overflow-wrap*/
div#normal { word-break:normal; }
div#break-all { word-break: break-all; }
div#break-all-wo-mincont { word-break: break-all; width: unset; }
div#keep-all { word-break: keep-all; }
div#break-word { word-break: break-word; }
div#break-word-wo-mincont { word-break: break-word; width: unset; }
/*Set other*/
body { display: flex; }
div { border: 1px solid; display: inline-block; margin: 30px; }
code { text-decoration: underline; }
<div id=normal><code>word-break:normal</code><br>Most words are short & don't need to break. But Antidisestablishmentarianism is long.
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>
<div id=break-all><code>word-break:break-all</code><br>Most words are short & don't need to break. But Antidisestablishmentarianism is long.
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>
<div id=break-all-wo-mincont><code>word-break:break-all</code><br>Most words are short & don't need to break. But Antidisestablishmentarianism is long.
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>
<div id=keep-all><code>word-break:keep-all</code><br>Most words are short. But Antidisestablishmentarianism is long.
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>
<div id=break-word><code>word-break:break-word</code><br>Most words are short & don't need to break. But Antidisestablishmentarianism is long.
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>
<div id=break-word-wo-mincont><code>word-break:break-word</code><br>Most words are short & don't need to break. But Antidisestablishmentarianism is long.
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>
Result:
And I noted for myself that:
word-break: break-all
is the most compact option, but you have to be careful because it depends onwidth: min-content;
word-break: keep-all
is the only one that keeps cjk text (and also other alphabets) on the same line. Almost like: normal;
but for cjk.overflow-wrap: break-word
would use it on the rare occasions whenword-break: break-all
is not appropriate, for example for Opera Mini.
Others:
overflow-wrap: anywhere
I don't see use cases for. Also it depends onwidth: min-content;
word-break: break-word
deprecated. Also it depends onwidth: min-content;
overflow-wrap: normal
andword-break: normal
initial values (defaults)
Comparison of browser support on caniuse.com (2023-01-24):

- 627
- 5
- 19