CSS overflow-wrap Property

Description

The overflow-wrap CSS property is used to control how words within an element should break and wrap when they exceed the boundaries of their container. It is particularly useful for ensuring that long words or strings of text do not disrupt the layout of a webpage. The property has two possible values: "normal," which allows words to break at their usual soft wrap points (like spaces and hyphens), and "break-word," which allows words to break anywhere within the container, even if it means breaking them in the middle of characters. This property is especially valuable for improving the readability and aesthetics of text content within responsive web designs.

Initial value
normal
Applies to
All elements
Inherited
Yes
Computed value
Specified value
Animatable
No
JavaScript syntax
object.style.overflowWrap

Interactive Demo

Most words are short & don't need to break. But Antidisestablishmentarianism is long. The width is set to min-content, with a max-width of 11em.

Syntax

overflow-wrap: normal | break-word

Values

  • normalIndicates that lines may only break at normal word break points.
  • break-wordIndicates that normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

Example

<h2>Block with the overflow-wrap: normal value</h2> 
<div class="test">The longest village name in Europe: <a href = "https://en.wikipedia.org/wiki/Llanweir-Pullguingill" target = "_blank" title = "Read on Wikipedia"> Llanvairpullguingillogogerihirndrobullantisiliogogogo </a></div>
<h2>Block with the value overflow-wrap: break-word</h2>
<div class="test2">The longest village name in Europe: <a href = "https://en.wikipedia.org/wiki/Llanweir-Pullguingill" target = "_blank" title = "Read on Wikipedia"> Llanvairpullguingillogogerihirndrobullantisiliogogogo </a></div>
.test {
   width: 300px;
   overflow-wrap: normal;
   background: azure; 
   border: 1px solid gray; 
} 
.test2 {
   width: 300px;
   overflow-wrap: break-word; 
   background: azure;
   border: 1px solid gray;
} 

Browser Support

The following table will show you the current browser support for the CSS overflow-wrap property.

Desktop
Edge Chrome Firefox Opera Safari
18234912.17
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
254912.171.54.4

Last updated by CSSPortal on: 2nd January 2024