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 from Bhumi Singhal on Stack Overflow
🌐
Stack Overflow
stackoverflow.com › questions › 1795109 › what-is-the-difference-between-word-break-break-all-versus-word-wrap-break
What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS? - Stack Overflow
Top answer
1 of 13
474

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.

2 of 13
238

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.

🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Guides › Text › Wrapping_breaking_text
Wrapping and breaking text - CSS - MDN Web Docs
Note: The overflow-wrap property acts in the same way as the non-standard property word-wrap. The word-wrap property is now treated by browsers as an alias of the standard property. An alternative property to try is word-break. This property will break the word at the point it overflows.
Discussions
Is there a property like word-wrap or overflow-wrap that can force breaks at word boundaries?
What you're asking is the default behaviour of text, look at the property's name "break-word", that means it'll split a word when there's no space available, if you don't want to split the word but instead you want the words to wrap then you don't need to add break-word. More on reddit.com
🌐 r/css
13
3
December 11, 2021
html - Difference between word-wrap: break-word and word-break: break-word - Stack Overflow
I needed to fix some CSS somewhere because my text wasn't wrapping around and was instead going on indefinitely if it was an extremely long word. Like in most cases, I tried word-wrap: break-word;... More on stackoverflow.com
🌐 stackoverflow.com
html - Difference between overflow-wrap and word-break? - Stack Overflow
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? ... To any future readers who might be initially confused as to why this was closed as a duplicate question. The CSS ... More on stackoverflow.com
🌐 stackoverflow.com
When to use CSS text-wrap: balance; vs text-wrap: pretty;
I didn't know that "text-wrap:pretty" existed. I wish they had taken my advice for what to call it: "text-wrap:orphan-killer". 😈 More on reddit.com
🌐 r/css
5
7
November 14, 2023
Videos
00:49
🌐 YouTube
🚫 Prevent Text Overflow in CSS || Word Break vs Overflow Wrap ...
November 9, 2024
09:26
🌐 YouTube
CSS Text Wrapping, Breaking & Hyphens - YouTube
February 3, 2023
3.61K
03:34
🌐 YouTube
How do you wrap long words in CSS? - YouTube
November 6, 2019
03:12
🌐 YouTube
The word-break property in CSS - use this to handle text overflow!
May 8, 2019
27.1K
02:19
🌐 YouTube
How To Wrap Text With CSS Tutorial - YouTube
February 19, 2020
03:34
🌐 YouTube
How do you wrap long words in CSS?
November 6, 2019
View all
View all
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Reference › Properties › word-break
word-break - CSS - MDN Web Docs
Has the same effect as word-break: normal except that language-specific analysis is performed to improve word breaks by not placing them in the middle of natural phrases. ... Has the same effect as overflow-wrap: anywhere combined with word-break: normal, regardless of the actual value of the ...
🌐
GeeksforGeeks
geeksforgeeks.org › css › what-is-the-difference-between-word-break-break-all-versus-word-wrap-break-word-in-css
CSS word-break vs word-wrap (Overflow Wrap) : What's the Difference ? - GeeksforGeeks
June 7, 2025 - The break-all box shows words being broken abruptly, even mid-word, while the break-word box wraps more cleanly at word boundaries. This comparison visually demonstrates when and why to choose each property.
🌐
Codrops
tympanus.net › codrops › css_reference › word-wrap
word-wrap | Codrops
December 11, 2016 - The two properties (word-break and word-wrap) differ rules and overflow of words: as mentioned earlier, word-wrap is used to break words that overflow their container, while the word-break property breaks all words at the end of a line, even those that would normally wrap onto another line ...
🌐
LogRocket
blog.logrocket.com › home › a complete guide to css word-wrap, overflow-wrap, and word-break
A complete guide to CSS word-wrap, overflow-wrap, and word-break - LogRocket Blog
June 4, 2024 - For example, setting the value of white-space CSS property to nowrap will disable wrapping. Forced line breaks are caused by explicit line-breaking controls or line breaks marking the end or start of blocks of text. The name word-wrap is the legacy name for the overflow-wrap CSS property.
🌐
Coder's Block
codersblock.com › blog › deep-dive-into-text-wrapping-and-word-breaking
Deep Dive into Text Wrapping and Word Breaking / Coder's Block
See how word-break: break-all moves the “k” down to avoid starting the second line with “.”? Meanwhile, line-break: anywhere doesn’t care. Let’s see how the CSS properties we’ve covered so far handle excessively long spans of punctuation. See the Pen Excessive Punctuation by Will Boyd (@lonekorean) on CodePen. overflow-wrap: break-word and line-break: anywhere are able to keep things contained, but then there’s word-break: break-all being weird with punctuation again — this time resulting in overflowing text.
Find elsewhere
🌐
Medium
medium.com › @igorshevchenko › wrapping-text-in-html-52a76c3c75d4
Wrapping text in HTML. word-break and overflow-wrap | by Igor Shevchenko | Medium
March 24, 2017 - If overflow-wrap:break-word;(word-wrap:break-word) is used, long long word will try to fit in the line, jump to the next one if there was not enough space in the first one, and then break, only when there is not enough space on the second line. On the other hand, if word-break:break-all; is used, the word will simply be broken as soon as there’s not enough space on the line. https://drafts.csswg.org/css-text-3/#propdef-word-wrap
🌐
CSS-Tricks
css-tricks.com › almanac › properties › w › word-break
word-break | CSS-Tricks
July 12, 2021 - Instead of just having every word at the end of the line break, regardless of length? ... This code works for me wonderfully. white-space: pre-wrap; /* css-3 / white-space: -moz-pre-wrap; / Mozilla, since 1999 / white-space: -pre-wrap; / Opera 4-6 / white-space: -o-pre-wrap; / Opera 7 / word-wrap: break-word; / Internet Explorer 5.5+ */
🌐
Zuga
zuga.net › articles › css-word-wrap-vs-word-break
Zuga.net | CSS - word-wrap vs. word-break
November 14, 2023 - The CSS property word-wrap (renamed to overflow-wrap in CSS3 to better reflect its intended purpose) specifies whether a word may be broken at an ... The CSS property word-break specifies whether a break may occur within a word.
🌐
Reddit
reddit.com › r/css › is there a property like word-wrap or overflow-wrap that can force breaks at word boundaries?
r/css on Reddit: Is there a property like word-wrap or overflow-wrap that can force breaks at word boundaries?
December 11, 2021 -

For example, If I have a sentence like the following:

I like cute dogs because they're awesome

doing something like word-break: break-word might give you

I like cute dogs because they're awe

some

The behavior I want is for it to break like

I like cute dogs because they're

awesome

I can't seem to find a way to do this. Thanks for the help and cheers.

The text is rendered inside of a container, and the width of the container typically succeeds in efficiently distributing the inner text, but not in all cases. There are weird cases of overflow, even for words whose length is only a fraction of the available width.

Top answer
1 of 8
3
What you're asking is the default behaviour of text, look at the property's name "break-word", that means it'll split a word when there's no space available, if you don't want to split the word but instead you want the words to wrap then you don't need to add break-word.
2 of 8
1
Have you considered just adding a
where needed?
🌐
Kenneth
kenneth.io › post › word-wrappinghyphenation-using-css
Word wrapping/hyphenation using CSS. | Kenneth Auchenberg
To fix this, I discovered, that you can use word-break: break-word which seems to be an undocumented and non-standard property value in WebKit. This makes the word wrapping behave like word-wrap: break-word, but works with dynamic widths.
🌐
Reddit
reddit.com › r/css › word-break vs word-wrap (or overflow-wrap). what's the difference and how to efficiently use both together?
r/css on Reddit: Word-break VS Word-wrap (or overflow-wrap). What's the difference and how to efficiently use both together?
September 14, 2024 - Both break words but it seems they are different and can work together. Word-break: Break all, Keep all, normal. Word-wrap (now know as Overflow-Wrap): Normal, Anywhere, Break-word.
🌐
CSS-Tricks
css-tricks.com › almanac › properties › o › overflow-wrap
overflow-wrap | CSS-Tricks
November 15, 2023 - A string of non-breaking space characters ( ) would be treated the same way and would also break at an appropriate spot. overflow-wrap is useful when applied to elements that contain unmoderated user-generated content (like comments sections).
🌐
Stack Overflow
stackoverflow.com › questions › 35251135 › difference-between-word-wrap-break-word-and-word-break-break-word
html - Difference between word-wrap: break-word and word-break: break-word - Stack Overflow
Top answer
1 of 1
13

Update

If you plan on breaking words and want to hyphenate as well, try the following:

.hyphenate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

This worked even in Chrome ... sort of ... sans hyphens. Anyways a detailed explanation is in this article.

word-break:break-word is not documented and only master developers know this ultra secret technique like the Quivering Palm of Death.

Actually it's an obscure -webkit- property that works like word-wrap: break-word but it's also used on dynamic lengths as well.

Kenneth.io - Word Wrapping Hypernation Using CSS

CSS-Tricks - word-break

From CaniUse:

Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word.

🌐
W3Schools
w3schools.com › cssref › css3_pr_word-wrap.php
CSS word-wrap property
The word-wrap property allows long words to be able to be broken and wrap onto the next line. ... The numbers in the table specify the first browser version that fully supports the property.
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Reference › Properties › overflow-wrap
overflow-wrap - CSS - MDN Web Docs
November 7, 2025 - The overflow-wrap property is specified as a single keyword chosen from the list of values below. ... Lines may only break at normal word break points (such as a space between two words).
🌐
Stack Overflow
stackoverflow.com › questions › 17259916 › difference-between-overflow-wrap-and-word-break
html - Difference between overflow-wrap and word-break? - Stack Overflow
Top answer
1 of 5
95

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 to overflow-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.

2 of 5
56

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 deprecated break-word keyword. When specified, this has the same effect as word-break: normal and overflow-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?

🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › overflow-wrap
overflow-wrap - CSS - MDN Web Docs - Mozilla
August 9, 2025 - To prevent overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line. No hyphenation character is inserted at the break point. Soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic sizes.
🌐
HubSpot
blog.hubspot.com › website › css-wordwrap
Everything You Need to Know About CSS Wordwrap
September 28, 2022 - See the Pen css wordwrap - word-break by HubSpot (@hubspot) on CodePen. As you can see, break-all adds a break every time a word would otherwise overflow (for non-CJK text). This behavior is similar to overflow wrap: break-word in that it causes a break in a word that would otherwise overflow.
Related queries
css overflow-wrap
word-break css
word-wrap: break-word not working
css word-wrap
css wrap text to next line
word-wrap break-word not working
overflow-wrap css
overflow-wrap vs word-wrap