CODESCRACKER

CSS word-wrap

The CSS word-wrap property is used when we need to wrap the long word on 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.

The word-wrap property is used to control how long words should be handled when they reach the end of a container.

Therefore, in the above example, the first paragraph has a width of 40px and a red border. The word-wrap property is set to normal, which is the default value. This means that long words will overflow outside of the container and will not be wrapped up in the next line.

The second paragraph has the same properties as the first one, but its word-wrap property is set to break-word. This value allows long words to be broken and wrapped onto the next line if they cannot fit within the container's width.

CSS word-wrap syntax

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

word-wrap: x;

The value of x should be any of the following:

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!