The word-wrap property allows long words to be broken and wrapped into the next line. It takes two values: normal and break-word.
In the exaample below, the word-wrap property is set to normal.
p {
width: 210px;
height: 100px;
border: 1px solid #000000;
word-wrap: normal;
}
This paragraph has a long word: thisisaverylongwordbutyouacntfinditinthedictionary.
Now let's see what happens when we use this same example and set the word-wrap property to break-word.
p {
width: 210px;
height: 100px;
border: 1px solid #000000;
word-wrap: break-word;
}
This paragraph has a long word: thisisaverylongwordbutyouacntfinditinthedictionary.
When the word-wrap property is set to break-word, the browser breaks a word when it is too long to fit within its container.