We constantly have unbreakable strings such as long words when developing our website, and by default, these strings will *overflow* its container in the *inline direction* if it's too small for it. 

Let's have a look at an example given below:

<html>
 <head>
 </head>
 <body>
  <p id="container">
    This text is too long to be contained inside this container and will overflow in the inline direction
  </p>
 </body>
</html>

#container{
    width: 10px;
    border:1px solid black;
}

codemirror

One of the way to correct this is using the <code>word-wrap</code> property. The **<code>word-wrap</code>** property allows you to force the text to wrap - even if it means splitting it in the middle of a word.

The <code>word-wrap</code> is used with the value break-word. So the syntax is:

<code>word-wrap:break-word;</code>

Let's have a look at an example with `word-wrap` given below: 

<html>
 <head>
 </head>
 <body>
   <p id="container">
     This text is way very too long to contained in this container. This long word will break and wrap to the next line using the <code>word-wrap</code> property
   </p>
 </body>
</html>

#container{
    width: 30px;
    height: auto;
    border: 1px solid black;
    word-wrap: break-word;
}

The long words break and wrap to the next line, and there is no *inline overflow*.

What is CSS word-wrap Property?

The CSS word-wrap property forces text to wrap, preventing overflow by splitting long words.