overflow-wrap

overflow-wrap adds emergency soft-break opportunities to otherwise unbreakable text. It helps long identifiers fit a narrow line without splitting every ordinary word prematurely.

Wrap an unbroken identifier

The first region scrolls if its text is too wide. The second permits emergency breaks through the token. No hyphen is inserted.

<div class="sample" tabindex="0" role="region" aria-label="Unwrapped token">
  workshopregistrationidentifierwithoutspaces
</div>
<div class="sample wrap">workshopregistrationidentifierwithoutspaces</div>

.sample {
  max-width: 12rem;
  padding: 0.5rem;
  margin-block: 0.5rem;
  background: #eff6ff;
  overflow: auto;
}
.wrap {
  overflow-wrap: anywhere;
}

Allow a flexible item to shrink and wrap

Min-width:0 allows the flex item to shrink. Overflow-wrap:anywhere then supplies breaks within its long text. Neither declaration is a substitute for the other.

<div class="row">
  <span class="token">workshopregistrationidentifierwithoutspaces</span
  ><span class="badge">New</span>
</div>

.row {
  display: flex;
  gap: 0.5rem;
  max-width: 18rem;
  border: 1px solid #94a3b8;
}
.token {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 0.5rem;
  background: #eff6ff;
}
.badge {
  flex: 0 0 auto;
  padding: 0.5rem;
}

Values and intrinsic sizing

The initial value is normal and the property is inherited. Normal uses ordinary line-break opportunities. Anywhere permits emergency breaks and includes them in min-content sizing. Break-word permits similar visual breaks but does not count those added opportunities when calculating min-content size. It is not a simple alias for anywhere.

Word-wrap is the legacy property alias for overflow-wrap. The deprecated word-break:break-word value is a different compatibility behavior; avoid stacking unrelated legacy declarations without a browser requirement.

Why text still overflows

White-space:nowrap prevents ordinary soft wrapping. A fixed minimum width or automatic flex/grid minimum can also constrain the containing box. A narrow track still needs content wrapping or reachable scrolling.

Use language-aware hyphens for appropriate word hyphenation and word-break for script-specific breaking rules. Learn min-width and white-space for the sizing prerequisites.

Sources and browser support

MDN: overflow-wrap describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.