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.

The overflow-wrap name is considered to be the standart 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).

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.

Browser support

chrome edge firefox safari opera
23.0+ 18.0+ 49.0+ 6.1+ 12.1+

Practice Your Knowledge

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

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?