X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

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.

Browser support

23.0+ 18.0+ 49.0+ 6.1+ 12.1+

Practice Your Knowledge

Which statement is correct about CSS word-wrap property?



Do you find this helpful?

Related Resources ΒΆ


Related articles