The CSS word wrap attribute is utilized to split lengthy words and move them to a new line. It is employed to avoid content overflow in cases where an unbreakable string exceeds the width of its container.
CSS Word Wrap Values
| 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. |
CSS Word Wrap Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.test {
width: 11em;
background-color: #00ffff;
border: 1px solid #000000;
padding:10px;
word-wrap: break-word;
}
</style>
</head>
<body>
<p class="test"> In this paragraph, there is a very long word:
iamsooooooooooooooooooooooooooooooolongggggggggggggggg.The long word will break and wrap to the next line.</p>
</body>
</html>
Output:
In this passage, there is an extremely lengthy term: iamsooooooooooooooooooooooooooooooolongggggggggggggggg. The extensive word will exceed the line and continue on the subsequent line.