X

Headline

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

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.

Overflow-wrap vs Word-break

Though overflow-wrap and word-break behave similarly there are differences between them. The overflow-wrap property breaks the word if it cannot be placed on the line without overflowing regardless of the language used. The word-break property is used for non-english languages and specifies wraps between letters of languages like Chinese, Japanese, and Korean (CJK).

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.

Browser support

23.0+ 18.0+ 49.0+ 6.1+ 12.1+

Practice Your Knowledge

Which one is not a correct value for the overflow-wrap property?



Do you find this helpful?

Related articles