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

Question

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?

Answer 1

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.

Answer 2

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.