What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS?

Question

What is the difference between "word-break: break-all" and "word-wrap: break-word"?

When I used both, they seemed to break the word if it was not fitting the container. But why did W3C make two ways to do it?

Tratner

Answer 1

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.

Oran

Also note that word-wrap is a legacy name for the newer property "overflow-wrap" in the specification. w3.org/TR/css3-text/#overflow-wrap – Gilbertogilbertson

Simply 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 use word-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 a pre element or table cell where the word-wrap property may not work as expected. – Pitre

Because 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. – Inequality

word-wrap: break-word -> wont break table ---- word-break: break-all -> breaks tables – Chian

Actually the definition says, that "The word-break property specifies line breaking rules for non-CJK scripts.". "CJK scripts are Chinese, Japanese and Korean ("CJK") scripts." – Mameluke

Note that the W3C link that @Gilbertogilbertson mentioned is now w3.org/TR/css-text-3/#overflow-wrap-property – Jamajamaal

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.

Pun

Why is this not accepted? This answer is more helpful for the majority of users. The CJK behaviour only applies to very international websites. – Cluff

Short but sweet answer! Though you might want to change word-wrap to overflow-wrap? – Antiseptic

There is something new like : word-break: break-word also. Please check. – Pun

@GauravAgarwal I believe css has moved much ahead and i havent had the time to catch up on it .. :D – Pun

@Cluff it applies to "very international websites" or, as 20% of the world calls them, "websites" – Mordent

@GauravAgarwal: should be noted that IE (even in the latest version) still relies on the legacy name. See caniuse.com/#search=overflow-wrap – Toxicity

"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". – Glycogen

Worth noting that browser support for word-break: break-word is not great. So if word-break: break-all is not what you want, don't make the mistake of thinking browsers fully support that property. Also, although word-wrap is now overflow-wrap some browsers still require the legacy syntax. For that reason, IMHO word-wrap: break-word; (supported everywhere that matters) is still the right choice if browser support is a thing you have to care about. – Planetoid

Great slides by Florian Rivoal (spec author) that cover this topic in more details: florian.rivoal.net/talks/line-breaking – Condensable

"not helpful for the majority of users" ? CJK concerns more than 20% of users of the www cf wikipedia – Resendez

Answer 3

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 wraps to the 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.

Konya

Is this still the case if u use break-word. I annoyingly found that word-break breaks urls but not word-wrap. Both using break-word got it from css-tricks.com/snippets/css/… – Biramous

Answer 4

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: In an overflow situation, break the words.
• word-break: break-all: In a normal situation, just break the words at the end of the line. An overflow is not necessary.

Giliana

Excellent 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. – Quart

@HenrikN table-layout: fixed; (possibly together with width/max-width) can make it work with overflow-wrap/word-wrap but it depends on the specific use case; just like word-break might not be what you want. – Pebbly

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.

Snotty

You can use table-layout:fixed to make the table not expand when using word-wrap:break-work – Lesley

@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? – Snotty

I 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 – Lesley

This behavior also happens when using word-wrap in conjunction with pre tags in Firefox unless they have a fixed width defined. Using word-break produces the desired result. I linked to this answer in a comment posted above because it demonstrates a common use case. – Pitre

Also display-inline elements with no width don't get affected by "word-wrap", but "word-break" still works. – Ruwenzori

Answer 6

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 six characters wide.

With word-break: break-all most words are broken and it looks unreadable:

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 six characters on each row until there are none remaining. It will do this ruthlessly, even two-letter-words like "is" can be divided into two 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 six-characters-per-row it has to break an eight-character 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

Comose

Answer 7

This is all I can find out. I am not sure if it helps, but I 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.

Singsong

Thank you for this as I was looking for the difference between word-wrap & word-break which can both have the value break-word – Le

Answer 8

word-break: break-all:

word is to continue to the border and then break in newline.

word-wrap: break-word:

At first, word wrap in newline and then continue to the 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>

Abner

Answer 9

From the respective W3C 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 W3C'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;

 /* Nonstandard for WebKit */
 word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;

Milreis

Answer 10

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

Jeopardy

Comments? Do you mean answers? – Deadlight

OK, the OP has left the building: "Last seen more than 8 years ago" – Deadlight

Answer 11

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 instead.

Regarding word-wrap, it isn't really replaced (and maybe also more universally recognized than 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).

5.5. Overflow Wrapping: the overflow-wrap/word-wrap property

overflow-wrap (MDN)

Barbirolli

Answer 12

overflow-wrap: break-word;

Reference

overflow-wrap (MDN)

Crab

Answer 13

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.

Maybe

What is the difference between "arbitrary points" and "any character"? Are "characters" not considered "points"? – Frontiersman