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 tells the browser whether it is allowed to break a normally unbreakable string — a long word, a URL, or a hash — onto a new line so the text does not spill out of its container.
Normally, CSS only inserts line breaks at "soft wrap opportunities" such as spaces and hyphens. A single long string with none of those (supercalifragilisticexpialidocious or https://example.com/a/very/long/path) has no place to wrap, so it overflows its box. overflow-wrap lets you authorize a break inside that string as a last resort.
When to use it
Reach for overflow-wrap when content is user-generated or unpredictable — comments, search queries, email addresses, links, code identifiers. These are exactly the strings that have no natural break points and can blow out a fixed-width column, a card, or a flex item. A common defensive rule is:
.user-content {
overflow-wrap: break-word;
}This keeps the layout intact without affecting normal text, because the break only kicks in when a word would otherwise overflow.
Values at a glance
The overflow-wrap property has three meaningful values — normal, break-word, and anywhere — plus the universal CSS keywords initial and inherit.
normal— the default. Words break only at normal opportunities (spaces, hyphens). A too-long word overflows.break-word— a long word breaks at an arbitrary point only when it would otherwise overflow. Crucially, it does not shrink the element's minimum intrinsic width, so it rarely disturbs the rest of the layout.anywhere— likebreak-word, but the break opportunity is counted when the browser calculates the element's minimum content size, so a flex or grid item can shrink narrower than its longest word.
overflow-wrap is the standard name for the older word-wrap property. word-wrap is kept as an alias for backward compatibility — they accept the same values and behave identically. Use overflow-wrap in new code.
Overflow-wrap vs word-break
overflow-wrap and word-break both influence where lines can break, but they answer different questions.
overflow-wrapbreaks a word only as a last resort, when it would otherwise overflow, regardless of language.word-breakcontrols breaking proactively. It is designed mainly for CJK languages (Chinese, Japanese, Korean) where breaks between characters are normal, and itsbreak-allvalue will break Latin words mid-character even when they would have fit.
Rule of thumb: use overflow-wrap: break-word to prevent overflow without changing normal wrapping; use word-break: break-all only when you genuinely want aggressive character-level breaking.
For breaking words at meaningful syllable boundaries with a hyphen, see the hyphens property, and for controlling whitespace and wrapping in general, see white-space.
Property summary
| Initial Value | normal |
|---|---|
| Applies to | All elements. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.overflowWrap = "normal"; |
Syntax
CSS overflow-wrap syntax
overflow-wrap: normal | anywhere | break-word | initial | inherit;Note the order of the keyword values matters in shorthand-style declarations, but for overflow-wrap you simply set one value at a time.
Example of the overflow-wrap property
Each paragraph below is constrained to 200px. The long dummydummy… string has no spaces, so under normal it overflows, while break-word and anywhere force it to wrap inside the box.
<!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>Values
| Value | Description |
|---|---|
| normal | Lines 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. |
| anywhere | Long 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-word | Long 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. |
| initial | Makes the property use its default value. |
| inherit | Inherits the property from its parent element. |