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:

ValueUses
normalTo break words at allowed break points only.
break-wordTo break the unbreakable words.
initialTo set this property to its default value.
inheritTo 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>

Output:

Explanation:

In the above example, we are using the CSS word wrap property to wrap a very long word.

Please Share