The word-wrap property is used to specify whether lines can break inside words that are so long that they would overflow their container and that are otherwise not breakable by default. 6g73p

How is it different from the word-break property breaks a line in between two characters of a word which comes at the end of this line, to make the whole line fit inside its container. But the word-wrap property, on the other hand, breaks a word when the word itself takes up an entire line and overflows that line; that is, when the word itself and on its own is too long that it would overflow its container, so we make it wrap just line a line would wrap to fit inside its container.

The word-wrap property only has an effect when white-space allows wrapping.

The word-wrap property is called overflow-wrap in the CSS Text Level 3 specification (which is still a Working Draft so things may change).

The two properties (word-break property breaks all words at the end of a line, even those that would normally wrap onto another line and wouldn’t overflow their container.

No hyphenation character is inserted at the break point of the word. Because of that, it would be wiser to use this property in conjunction with the hyphens property.

p {
    word-wrap: break-word;
}