CSS word-wrap

The CSS word-wrap property is used when we need to wrap the long word to the new line. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{width: 40px; border: 1px solid red;}
      .a{word-wrap: normal;}
      .b{word-wrap: break-word;}
   </style>
</head>
<body>
   
   <h2>word-wrap: normal</h2>
   <p class="a">Consectetur adipisicing elit.</p>

   <h2>word-wrap: break-word</h2>
   <p class="b">Consectetur adipisicing elit.</p>

</body>
</html>

Output

word-wrap: normal

Consectetur adipisicing elit.

word-wrap: break-word

Consectetur adipisicing elit.

CSS word-wrap Syntax

The syntax of word-wrap property in CSS, is:

word-wrap: x;

The value of x should be any of the following:

normal - used to break words only at allowed break points. This is the default value
break-word - used to break and wrap the long word to the new line
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS Online Test

« Previous Tutorial Next Tutorial »