overflow-wrap
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
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 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
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
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. |