CSS overflow-wrap Property

Beginner
6 min read
Updated: Oct 2026
3 examples
Live preview
CSS overflow-wrap property breaking a long word inside a narrow text box
Definition

Definition and Usage

The overflow-wrap property controls whether the browser may insert line breaks inside an otherwise unbreakable string — such as a long word or URL — so the text fits its line box instead of overflowing.

The initial value is normal, which only breaks at normal points like spaces. Use break-word or anywhere when a whole word cannot fit on one line. Unlike word-break, overflow-wrap breaks only when that overflow would otherwise happen.

Baseline · Widely available.

Not deprecated. Standard-track CSS Text property. Legacy alias: word-wrap began as a non-standard Microsoft name and is now an alias of overflow-wrap — prefer overflow-wrap in new CSS.

Syntax

CSS Syntax

syntax.css
overflow-wrap: normal | break-word | anywhere | initial | inherit;
Values

Property Values

ValueDescriptionTry it
normalDefault. Break only at normal points such as spacesTry it
break-wordMay break long strings to prevent overflow. Does not affect min-content sizingTry it
anywhereMay break long strings to prevent overflow. Soft wraps count for min-content sizeTry it
initialResets to the initial value, normalTry it
inheritTakes the value from the parent elementTry it
Approach

How to Use overflow-wrap

Constrain the text box, then choose whether long strings may break inside a word.

  1. Give the text a limited width (a card, sidebar, or max-width).
  2. Leave normal if words should only break at spaces.
  3. Set break-word for most UI text and long URLs in narrow boxes.
  4. Use anywhere when you also want those soft wraps to shrink min-content sizing (flex/grid min sizes).
PieceRequired?Role
Limited line widthYes (to see the effect)Without a narrow box, long words still fit on one line
KeywordYesnormal, break-word, or anywhere
InheritedBy defaultChildren inherit unless you override them
Companion propertiesOptionalword-break and hyphens change break style further
Try it

Live Preview

A narrow box holds one long word. Change overflow-wrap and watch whether the word breaks or sticks out.

Box width stays fixed. Only the wrap keyword changes.

Box

overflow-wrap: break-word

Code

CSS Examples

Each snippet focuses on overflow-wrap. The narrow width is only there so a long string can overflow. Use Try It Yourself for a live editor.

Example 1 — Default Normal

Long words stay intact and can stick out of a narrow box.

CSS
<style>
  p {
    width: 140px;
    overflow-wrap: normal;
    border: 1px solid #cbd5e1;
    padding: 8px;
  }
</style>

<p>Supercalifragilisticexpialidocious</p>
Try It Yourself

How It Works

  1. Limit the width. width: 140px makes a narrow line box.
  2. Keep normal. overflow-wrap: normal only allows breaks at spaces.
  3. One long word. There is no space inside the word, so it cannot wrap.
  4. Result: the word overflows past the border instead of breaking mid-word.

Example 2 — Break Word

Allow a mid-word break only when the whole word cannot fit.

CSS
<style>
  p {
    width: 140px;
    overflow-wrap: break-word;
    border: 1px solid #cbd5e1;
    padding: 8px;
  }
</style>

<p>https://example.com/very/long/path/name</p>
Try It Yourself

How It Works

  1. Same narrow box. The URL is longer than 140px.
  2. Set break-word. The browser may break inside the string to stop overflow.
  3. Only when needed. Short words that fit on a line still wrap normally at spaces.
  4. Common UI fix. Useful for cards, comments, and sidebars that show long links.

Example 3 — Anywhere

Break like break-word, and let those soft wraps affect min-content size.

CSS
<style>
  p {
    width: min-content;
    max-width: 140px;
    overflow-wrap: anywhere;
    border: 1px solid #cbd5e1;
    padding: 8px;
  }
</style>

<p>Supercalifragilisticexpialidocious</p>
Try It Yourself

How It Works

  1. Use min-content width. Intrinsic sizing asks how narrow the box can get.
  2. Set anywhere. Soft wrap opportunities inside the long word count toward that min size.
  3. Cap with max-width. max-width: 140px keeps the demo readable in a narrow column.
  4. Vs break-word. Visual wrapping looks similar here; the sizing difference shows up most in flex and grid min sizes.

Edge Cases & Pitfalls

If text still overflows or breaks too aggressively, check these first.

width

No narrow box, no visible wrap

If the container is wider than the long string, every keyword looks the same. Constrain width before comparing values.

word-break

Do not confuse with word-break

word-break: break-all can break even when a word would fit alone on the next line. overflow-wrap is the gentler, overflow-only option.

anywhere

anywhere changes min-content

In flex and grid, anywhere can let a box shrink smaller than break-word would. Prefer break-word unless you need that sizing behavior.

alias

word-wrap is a legacy alias

Old tutorials may show word-wrap: break-word. It still works as an alias, but write overflow-wrap in new code.

nowrap

white-space: nowrap blocks wrapping

If white-space prevents wrapping, overflow-wrap cannot create multi-line breaks. Fix white-space first.

Compatibility

Browser Support

overflow-wrap is a browser CSS property for text wrapping. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available

overflow-wrap

break-word is broadly supported (including IE via the word-wrap alias era). anywhere needs Chrome 80+, Firefox 65+, Safari 15.4+, Edge 80+.

97% break-word support
Google Chrome 23+ · anywhere 80+
Full support
Mozilla Firefox 49+ · anywhere 65+
Full support
Apple Safari 7+ · anywhere 15.4+
Full support
Microsoft Edge 18+ · anywhere 80+
Full support
Opera 12.1+ · anywhere 67+
Full support
Samsung Internet 4+ · anywhere 13+
Full support
Internet Explorer word-wrap / break-word
Partial
overflow-wrap Widely supported

Bottom line: Safe to use break-word in production. Use anywhere when you need modern min-content behavior. Prefer overflow-wrap over the legacy word-wrap name. It is not a runtime API.

Remember

Key Takeaways

  • Role: allow soft breaks inside long words or URLs so they fit the line box.
  • Initial value: normal. Long unbroken strings can overflow a narrow box.
  • Common pick: break-word for cards, sidebars, and long links.
  • anywhere vs break-word: similar wrapping; anywhere also affects min-content sizing.

One line: use break-word when a whole word cannot fit — it wraps only to stop overflow.

Frequently Asked Questions

It controls whether the browser may break an otherwise unbreakable string, such as a long word or URL, so the text fits inside its line box instead of overflowing horizontally.
The initial value is normal. Lines break only at normal points such as spaces, so a very long word can stick out of a narrow box.
Both can break long strings to prevent overflow. anywhere also counts those soft wrap opportunities when calculating min-content size; break-word does not.
overflow-wrap breaks a word only when that whole word cannot fit on a line by itself. word-break can force breaks more aggressively, depending on its value.
word-wrap is a legacy alias for overflow-wrap. Prefer overflow-wrap in new CSS. Older content may still use word-wrap for compatibility.
It is Baseline Widely available. break-word works broadly, including Internet Explorer. anywhere needs Chrome 80+, Firefox 65+, Safari 15.4+, or Edge 80+. It is a browser CSS property, not a Node.js feature.

Next: overflow-x

Learn how to clip or scroll content on the horizontal axis.

overflow-x tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS overflow-anchor Property CSS overflow-x Property