text-wrap and overflow-wrap — Different Jobs

Two Properties, Two Concerns

Developers often confuse text-wrap with overflow-wrap (formerly word-wrap). They look related but solve different problems.

• text-wrap controls the line-breaking strategy: greedy, balanced, optimized-trailing-lines, or no-break.
• overflow-wrap controls whether an unbreakable string (a long URL, a 50-character ID, a German compound noun) can be split mid-word as a fallback.

Example: long URL in a narrow column

<p>See https://very-long-subdomain.example.com/path/to/resource for details.</p>

In a 200px column with default CSS, the URL overflows the container because it has no spaces. Two fixes:

/* Option 1: break long unbreakable strings */
p {
  overflow-wrap: anywhere;
}

/* Option 2: break only when there's no other choice */
p {
  overflow-wrap: break-word;
}

overflow-wrap values

• normal (default): only break at spaces and explicit break points.
• break-word: same as normal, but also break long unbreakable strings if they would otherwise overflow.
• anywhere: same as break-word, but also affects min-content calculations (so flex/grid items can shrink further).

Combining with text-wrap

The two properties layer cleanly:

article p {
  text-wrap: pretty;        /* nice trailing lines */
  overflow-wrap: anywhere;  /* break URLs as last resort */
  hyphens: auto;            /* allow language-aware hyphenation */
}

Order of break preference for the browser:

1. Break at spaces (the default behavior).
2. Insert hyphens at language-appropriate points (hyphens: auto).
3. Break inside unbreakable strings (overflow-wrap: anywhere).

text-wrap: pretty then re-optimizes the trailing lines using whichever break points the above three rules made available.

When text-wrap: nowrap meets overflow-wrap

text-wrap: nowrap tells the browser "do not break this at all," which overrides overflow-wrap. So:

.btn {
  text-wrap: nowrap;
  overflow-wrap: anywhere; /* ignored */
}

The button label stays on one line and overflows the container if too long. To handle that, use text-overflow: ellipsis instead.