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. |
Browser support
23.0+ | 18.0+ | 49.0+ | 6.1+ | 12.1+ |
Practice Your Knowledge
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.