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

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

overflow-wrap: break-word;

Reference

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.