CSS Word Wrap

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.