CSS overflow-wrap Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The overflow-wrap property controls whether the browser may break within an otherwise unbreakable string to prevent it from overflowing its container. It governs visual line-breaking behavior for long words, URLs, or continuous character sequences that would otherwise force a line box to grow or produce horizontal scrolling. By allowing breaks at appropriate points, it helps maintain layout integrity in constrained, responsive, or narrow containers without changing the underlying text content.

How that breaking actually occurs is affected by other text-handling properties and layout context. For example, word-break determines the general algorithm of where breaks may be allowed (especially for CJK text and very long words), while white-space controls whether wrapping is permitted at all and whether sequences of spaces are collapsed or preserved. Hyphenation behavior from hyphens can combine with allowed break points to insert hyphen characters for readability, and when overflow strategies result in clipped or scrolled content the box-level overflow rules determine whether scrollbars, clipping, or visible overflow occur.

In practical terms, overflow-wrap is commonly used to prevent layout breakage caused by long, unbroken strings—such as URLs, long file names, or generated tokens—so text remains readable without horizontal scrolling. It operates at the inline formatting level, so its effects depend on the available line box width, the presence of inline elements, and any forced no-wrap rules nearby. It does not alter the semantic contents of the text; it only influences where the browser may place line breaks when constructing the layout.

Considerations when using it include readability (breaking words can make text harder to scan if overused), language specifics (word-break rules differ across scripts), and the visual impact of inserted hyphens or break points. When precise control over how and when breaking occurs is required, combine it thoughtfully with the other properties mentioned above and, when needed, with explicit soft-break characters (zero-width space, soft hyphen) inserted into the content to indicate preferred break opportunities.

Definition

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

Interactive Demo

overflow-wrap: normal;

overflow-wrap: anywhere;

overflow-wrap: break-word;

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

HTML

<body>

  <main class="wrapper">

    <h1>overflow-wrap example</h1>



    <section class="example">

      <h2>Without overflow-wrap</h2>

      <div class="box no-wrap">

        ThisIsAnExtremelyLongWordThatWouldNormallyOverflowTheContainerButHereWeCanSeeHowItBehavesWhenOverflowWrapIsNotApplied

      </div>

    </section>



    <section class="example">

      <h2>With overflow-wrap: break-word</h2>

      <div class="box wrap">

        ThisIsAnExtremelyLongWordThatWouldNormallyOverflowTheContainerButHereWeCanSeeHowItBehavesWhenOverflowWrapIsApplied

      </div>

    </section>



    <p class="note">Resize the viewport or view on a narrow screen to observe the difference.</p>

  </main>

</body>

CSS

/* Basic page styling */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.4;
  padding: 24px;
  background: #f7f7fb;
  color: #111827;
}

.wrapper {
  max-width: 760px;
  margin: 0 auto;
}

h1 {
  font-size: 20px;
  margin-bottom: 12px;
}

.example {
  margin-bottom: 20px;
}

.box {
  width: 320px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  padding: 12px;
  border-radius: 6px;
  overflow: visible; /* allow overflow to be visible for comparison */
}

.no-wrap {
  /* Default behavior: an unbroken long word may overflow the box */
}

.wrap {
  /* The property being demonstrated */
  overflow-wrap: break-word;
  /* Legacy name for broader compatibility */
  word-wrap: break-word;
}

.note {
  font-size: 13px;
  color: #6b7280;
  margin-top: 12px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS overflow-wrap property. Hover over a browser icon to see the version that first introduced support for this CSS property.