CSS overflow-wrap

The CSS overflow-wrap property is used define whether to wrap the overflowed long word to the new line or not. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{width: 60px; border: 1px solid red;}
      .a{overflow-wrap: normal;}
      .b{overflow-wrap: anywhere;}
      .c{overflow-wrap: break-word;}
   </style>
</head>
<body>
   
   <h2>overflow-wrap: normal</h2>
   <p class="a">trustworthiness is the ability to be relied on as honest</p>

   <h2>overflow-wrap: anywhere</h2>
   <p class="b">trustworthiness is the ability to be relied on as honest</p>

   <h2>overflow-wrap: break-word</h2>
   <p class="c">trustworthiness is the ability to be relied on as honest</p>

</body>
</html>

Output

overflow-wrap: normal

trustworthiness is the ability to be relied on as honest

overflow-wrap: anywhere

trustworthiness is the ability to be relied on as honest

overflow-wrap: break-word

trustworthiness is the ability to be relied on as honest

CSS overflow-wrap Syntax

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

overflow-wrap: x;

The value of x should be any of the following:

normal - used not to break the long word, when overflow the container. This is the default value
anywhere - used to break the long word, when overflow the container
break-word - used to break the long word, when the long word overflow the container
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 »