CSS word-wrap Property

The word-wrap property allows breaking lines into words so as to fit in its container. This property even allows breaking words that are not unbreakable.

The word-wrap property only has an effect when the white-space property allows wrapping.

In the CSS3 specification, the word-wrap property is called overflow-wrap.

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

Syntax

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

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>

An example with "break-word" value:

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>

Values

Value Description
normal Breaks the words at allowed break points. This is the default value of this property.
break-words Make unbreakable words be broken.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Related Resources


Practice Your Knowledge

Which statement is correct about CSS word-wrap property?




Related articles