CSS3 word-break and word-wrap properties

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)

Syntax

  word-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:

Syntax

word-wrap: normal|break-word|initial|inherit;

p.test {word-wrap:break-word;}

Read about word-wrap on w3schools.com