The word-wrap property is used to specify whether lines should break within words to prevent text from overflowing its content box. In the CSS Text Level 3 specification, this property is named overflow-wrap.
Basically, this property is used to break long words which cannot fit inside their parent element. It can be used to break words in cases where user generates the content in which some word can exceed the parent element's width.
CSS
word-wrap: value;
Values
normal : This is the default value. Lines break at normal break points like white spaces.
break-word : Words may be broken at arbitrary points if there is no other acceptable break point in the line.
initial : Sets the default value.
inherit : Inherits value from parent element.
Examples
See the Pen Word-wrap property by Aakhya Singh (@aakhya) on CodePen.
In the above example, giving word-wrap: break-word broke the long word assassinationofthewildinthewildforest which could not be accomodated in the parent element's container.
There is another property word-break, which is also used to break words if the content overflows the parent element's width.
But how is word-wrap property different from the word-break property?
The main difference between the two is in the way words break to prevent overflowing parent container's width. The word-break property breaks a line by breaking the last word where one portion of the broken word appears at the end of the previous line and the other portion appears at the beginning of the new line. On the other hand, the word-wrap property breaks a word when the word alone takes up a whole line and overflows it.
The following demo will help understand the difference better.
See the Pen Difference between word-wrap and word-break CSS properties by Aakhya Singh (@aakhya) on CodePen.
The word-break property can be used to break even those words which would normally appear onto the next line and do not cause overflow, so as to prevent any white space between the margin and the text.
Browser Support
The word-wrap property is supported in all the major browsers. Its alternative, the overflow-wrap property is also supported by all the major browsers except IE, Opera Mini and Edge.
