W3docs
en
Log in

CSS overflow-wrap Property

The overflow-wrap CSS property is used to specify whether there will be line break or not in the line box. See property description, values and examples.

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 main values: normal, break-word, and anywhere. It also supports the universal CSS keywords initial and inherit.

Info

The overflow-wrap name is considered to be 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 a word if it cannot be placed on the line without overflowing, regardless of the language used. The word-break property is primarily used for CJK languages (Chinese, Japanese, and Korean) to specify where line breaks can occur between characters, but it also provides strong breaking rules for non-CJK text.

The word-wrap and the overflow-wrap properties

The word-wrap property accepts the same values as overflow-wrap. These properties behave similarly.

Initial Valuenormal
Applies toAll elements.
InheritedYes.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.overflowWrap = "normal";

Syntax

CSS overflow-wrap syntax

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

Example of the overflow-wrap property:

CSS overflow-wrap code 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;
      }
    </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>
  </body>
</html>
Try it Yourself »

Values

ValueDescription
normalLines will only break according to normal line breaking rules. Words will not break even if they overflow the container. This is the default value of this property.
anywhereLong words or URLs will break at any point if there are no otherwise-acceptable break points in the line. Hyphenation characters are not considered acceptable break points, even if the hyphens property is set.
break-wordLong words or strings that do not fit inside their container will break at an arbitrary point to force a line break. Soft wrap opportunities are not considered when calculating the element's minimum content size.
initialMakes the property use its default value.
inheritInherits the property from its parent element.

Practice

Practice

What is the function of the CSS 'overflow-wrap' property?