CSS overflow-wrap Property

The overflow-wrap property is used to specify whether the browser can break lines within an unbreakable string thus preventing content from overflowing.

The overflow-wrap property has three values: normal, anywhere and break-word.

The overflow-wrap name is the standard name for the word-wrap property.

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

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style> 
      p {
      width: 200px;
      margin: 3px;
      background: #ccc;
      }
      .anywhere { 
      overflow-wrap: anywhere; 
      }
      .break-word {
      overflow-wrap: break-word;
      }
      .normal {
      overflow-wrap: normal;
      }
      .auto {
      overflow-wrap: auto;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-wrap property example</h2>
    <h3>Overflow-wrap: normal</h3>
    <p>Lorem Ipsum has been the industry's 
      standard  <em class="normal"> dummydummydummydummydummydummydummydummy</em> text ever since the 1500s...
    </p>
    <h3>Overflow-wrap: anywhere</h3>
    <p>Lorem Ipsum has been the industry's
      standard <em class="anywhere">dummydummydummydummydummydummydummydummy </em> text ever since the 1500s...
    </p>
    <h3>Overflow-wrap: break-word</h3>
    <p>Lorem Ipsum has been the industry's 
      standard <em class="break-word">dummydummydummydummydummydummydummydummy </em> text ever since the 1500s...
    </p>
    <h3>Overflow-wrap: auto</h3>
    <p>Lorem Ipsum has been the industry's 
      standard <em class="auto">dummydummydummydummydummydummydummydummy</em> 
      text ever since the 1500s...
    </p>
    </div>
  </body>
</html>

Values

Value Description
normal Lines will only break according to normal line breaking rules. Words will not break even if overflow the container. This is the default value of this property.
anywhere Long words or URLs will break at any point if there are no otherwise-acceptable break points in the line. Hyphenation character will not break even if the hyphens property is used.
break-word Long words or strings of characters that do not fit inside their container will break in an arbitrary place to force a line break but soft wrap opportunities introduced by the word break are not considered when calculating min-content intrinsic sizes.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.




Related articles