To wrap the long words onto the next line in order to prevent overflow, the CSS Word wrap property is used. It is useful for an unbreakable string that is too long to fit in the containing box.
CSS Word Wrap Values:
| Value | Uses |
| normal | To break words at allowed break points only. |
| break-word | To break the unbreakable words. |
| initial | To set this property to its default value. |
| inherit | To inherit this property from its parent element. |
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.wrap {
width: 200px;
background-color: crimson;
border: 5px solid black;
color: white;
padding:20px;
word-wrap: break-word;
}
</style>
</head>
<body>
<p class="wrap">Llllllllllllllllllllllllllllllllllllloooooooooooooooooooooooooooonnnnnnnnnnnnnnnnnnnnnnnnnnnnnggggggggggggggggggggggggggggwwwwwwwwwwwwwooooorrrrrrrrrrrrddddddddddddddddddddddddddddd</p>
</body>
</html>
Explanation:
In the above example, we are using the CSS word-wrap property to wrap a very long word.