overflow-wrap
Breaks long words only when they would otherwise overflow their container.
- Initial value
normal- Inherited
- Yes
- Animatable
- no
- Applies to
- text elements
- JavaScript
element.style.overflowWrap = "anywhere"
Example
#.comment {
overflow-wrap: anywhere;
}<div class="comment stage" style="overflow-wrap: anywhere; width: 240px;">Great course! My project: https://github.com/codeworlds-student/my-first-html-css-project</div>Definition and usage
#The overflow-wrap property is a safety net for long strings of characters. Unlike word-break: break-all, it leaves ordinary words untouched. It only breaks a word when it truly can’t fit on the line as a whole.
break-word and anywhere behave similarly, but anywhere also factors into the calculation of an element’s minimum width. In practice, anywhere better protects against columns getting pushed wider in flex and grid layouts.
This property used to be called word-wrap, and that name still works as an alias.
Syntax
#overflow-wrap: normal | break-word | anywhere;Values
#- The long word overflows the box.
- The long word breaks, ordinary ones stay untouched.
- Like break-word, but also counted toward the minimum width.
Values in practice
#normal
.demo { overflow-wrap: normal; }break-word
.demo { overflow-wrap: break-word; }anywhere
.demo { overflow-wrap: anywhere; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Add
overflow-wrap: anywhereto comments and user-submitted content. A single long link won’t then stretch the layout. - In flex containers, pair it with
min-width: 0on the element holding the text.
Related entries
#Spotted a mistake or missing an example? Write to us.