CSS Word Wrap
BLUF: Styling is what brings the web to life, and mastering CSS Word Wrap is key to creating beautiful, responsive interfaces. This tutorial breaks down the concepts and syntax you need to succeed with CSS.
Visual Design Hack: CSS Word Wrap
CSS is all about presentation. Discover how CSS Word Wrap works to transform plain HTML into a premium user experience in the guide below.
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.
