word-break
Normally, line breaks in text can only occur in certain spaces, like when there is literally a space or a hyphen. When you set word-break to break-all, line breaks can occur between any character. Resulting in, for example:
Perform ance
(if that word wouldn't quite fit into its parent container width)
Syntaxword-break: normal | break-all | keep-all;Example
p {
word-break: break-all;
}
It's often used in places with user generated content so that long strings don't risk breaking layout. One very common example is a long copy and pasted URL. If that URL has no hyphens, it can extend beyond the parent box and look bad or worse, cause layout problems.
Read about word-break on w3schools.com
Read about word-break on css-tricks.com
word-wrap
Allow long words to be able to break and wrap onto the next line:
Syntaxword-wrap: normal|break-word|initial|inherit;
p.test {word-wrap:break-word;}
