CSS word-wrap Property

The word-wrap property breaks long words so they fit within their container. This property allows breaking words that would otherwise overflow.

The property controls how long words are handled when they exceed the container's width. It does not accept positive or negative values; those belong to the word-spacing property. When set to normal, words break only at allowed break points.

The word-wrap property is one of the CSS3 properties.

It only has an effect when the white-space property allows wrapping.

Info

In modern CSS, word-wrap is an alias for the overflow-wrap property.

Initial Value	normal
Applies to	All elements.
Inherited	Yes.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.wordWrap = "break-word";

Syntax

CSS word-wrap values

word-wrap: normal | break-word | initial | inherit;

Example of the word-wrap property with the "normal" value:

CSS word-wrap code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 120px;
        border: 1px solid #666;
        word-wrap: normal;
      }
    </style>
  </head>
  <body>
    <h2>Word-wrap property example</h2>
    <div>
      Lorem Ipsum is
      <strong>simplysimplysimplysimplysimplysimply</strong> 
       dummy text of the printing and typesetting
      <strong>industryindustryindustryindustryindustry</strong>.
    </div>
  </body>
</html>

Try it Yourself »

Result

Example of the word-wrap property with the "break-word" value:

CSS word-wrap break-word example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 120px;
        border: 1px solid #666;
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <h2>Word-wrap property example</h2>
    <div>
      Lorem Ipsum is
      <strong>simplysimplysimplysimplysimplysimply</strong> 
      dummy text of the printing and typesetting
      <strong>industryindustryindustryindustryindustry</strong>.
    </div>
  </body>
</html>

Try it Yourself »

Values

Value	Description
normal	Breaks words only at allowed break points. This is the default value.
break-word	Allows breaking unbreakable words if they exceed the container width.
initial	Sets the property to its default value.
inherit	Inherits the property from its parent element.

Practice

Which statement is correct about CSS word-wrap property?

It's an animatable property.
It only has an effect when the white-space property allows wrapping.
Its break-words value breaks the words at allowed break points.