Word Wrapping in CSS

CSS Word wrap

Word wrapping is the property of CSS that breaks long words and wraps or rolls them onto the next line so that it can prevent the overflow of unbreakable strings that are too long to be adjusted or fit into the specified container.

Values of word wrap

Now let’s see a simple example for each property value to understand properly.

Example: Normal

<html>
<head>
<style>
p.Normal {
width: 9em;
background-color: #00ff00;
border: 3px solid #000fff;
padding:10px;
word-wrap: normal;
}
</style>
</head>
<body>
<p class="Normal"> This paragraph contains, very long words like:
More dddoooooooooooooooooooooorrrrrrrrrrrr and ppppppaaaaaaaaaaaaassssss. The long words will break and wrap onto the next line.</p>
</body>
</html>

Output

In the preceding output, you can see that when we apply the normal property value, it only breaks words only at given breakpoints, not the long words that are going outside the container.

Example: Break-word

When we apply break-word then:

word-wrap: break-word;

Output

Now the long words are also broken and fit in the container after applying break-word.

Example: Initial

<html>
<head>
<style>
div {
color: blue;
border: 1px solid red;
}
h3 {
color: initial;
}
</style>
</head>
<body>
<div>
<h3>Even being inside 'div' I am BLACK instead of BLUE
<br>(Due to color property set to "initial")
</h3>
<br>
<p>Thank God I am inside 'div' and I am also BLUE
<br>(Due to color property set to "blue").
</p>
</div>
<p>I am not affected any more :) </p>
</body>
</html>

Output

Example: Inherit

<html>
<head>
span {
color: blue;
}
.unique span {
color: inherit;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
I am
<span>
<b>SPAN element
<b>
</span> and I am
<span>
<b>BLUE
<b>
</span>, as set without bothering my other parts.
</div>
<br>
<br>
<div class="unique" style="color:red">
I am unique
<span>
<b>SPAN element</b>
</span> and I am
<span>
<b>RED</b>
</span>, because I inherit my color from my parent.
</div>
<br>
<div class="unique" style="color:cyan">
I am also unique
<span>
<b>SPAN element</b>
</span> and I am
<span>
<b>CYAN</b>
</span>, because I also inherit my color from my parent.
</div>
<br>
<br>
<div style="color:green">
I am also
<span>
<b>SPAN element</b>
</span> and I am also
<span>
<b>BLUE
<b>
</span>, as set without bothering my other parts.
</div>
</body>
</html>

Output

Thank you, keep learning and sharing.

10 Comments

Join the conversation! Your thoughts help the community grow.

Santhakumar Munuswamy11y ago
Nice article! Thanks for sharing
Vipul Malhotra11y ago
Nice..Thanks for writing
Sibeesh Venu11y ago
Nice share
Gopi Chand11y ago
Thanks to all for your appreciation
Jacob Robinson11y ago
Good One..
Debendra Dash11y ago
good one....
Debasis Saha11y ago
Good One..
Nilesh Jadav11y ago
Nice article sir
Rakesh11y ago
Good one sir
Pankaj Kumar Choudhary11y ago
Nice One Sir......