CSS word wrap property is used to break the long words and wrap onto the next line. This property is used to prevent overflow when an unbreakable string is too long to fit in the containing box.
| Value | Description |
|---|---|
| normal | This property is used to break words only at allowed break points. |
| break-word | It is used to break unbreakable words. |
| initial | It is used to set this property to its default value. |
| inherit | It inherits this property from its parent element. |
See this example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Word Wrap</title>
<style>
p.wordwrap {
width:20em;
background-color:#11a286;
border: 1px solid #075244;
color:#fff;
word-wrap:break-word;
padding:10px;
}
</style>
</head>
<body>
<p class="wordwrap">In this paragraph, i am sooooooooooooooooooooooooooooooooooooooooooooooooooooolongggggggggggggggggggggggggggggg.The long word will break and wrap to the next line.</p>
</body>
</html>