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 only three values: normal, break-word and anywhere.

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).

The word-wrap and the overflow-wrap properties

The word-wrap property takes the same values as the overflow-wrap property. These properties behave similar, too.

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 of the overflow-wrap property:

<!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>
  </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.