overflow-wrap

Definition

The overflow-wrap CSS property is used to control how long words and strings of text should be wrapped or broken when they exceed the width of their container. It determines whether the text should be allowed to overflow the container or if it should wrap onto the next line to maintain readability.

The overflow-wrap property accepts two values:

normal: This is the default value. It allows words to break only at allowed break points, such as hyphens, if present. If there are no allowed break points, the text may overflow the container.
break-word: This value allows long words or strings of characters to break and wrap onto the next line, even if there are no allowed break points. This helps prevent horizontal scrolling and ensures that the text stays within the container.

Here’s an example:

.container {
  overflow-wrap: break-word;
}

In this example, the .container class applies the overflow-wrap: break-word; rule to allow long words or strings of text to break and wrap onto the next line within the container, if needed.

The overflow-wrap property is particularly useful when dealing with long URLs, email addresses, or other content that may cause horizontal overflow. By using break-word, you can ensure that the text is wrapped and displayed within the available space, maintaining readability and preventing layout issues caused by horizontal overflow.

Syntax

.badge {
  overflow-wrap: break-word;
}

Values

normal: only break at allowed break points.
anywhere: break anywhere if needed without adding hyphenation.
break-word: legacy alias for anywhere (maintained for compatibility).

Practical Examples

.badge {
  overflow-wrap: anywhere;
}

Allow long tokens (URLs, IDs) to wrap inside narrow containers.

HTML

Order ID: 1234567890ABCDEFGH

Code

<div class="grid gap-4 sm:grid-cols-2">
  <div class="rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-700 shadow-sm" style="max-width: 18rem;">Order ID: <span class="bg-slate-100 px-2">1234567890ABCDEFGH</span></div>
  <div class="rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-700 shadow-sm" style="max-width: 18rem; overflow-wrap: anywhere;">Order ID: <span class="bg-sky-100 px-2">1234567890ABCDEFGH</span></div>
</div>

Tips & Best Practices

Use overflow-wrap: anywhere on badges or table cells containing potentially long strings.
Pair with word-break: break-word for older browsers that use the legacy property.
Combine with hyphens: auto for better line breaks in regular words.

Accessibility & UX Notes

Prevent horizontal scrolling, which can be challenging for keyboard and screen reader users.

Browser Support

Supported in modern browsers; break-word fallback covers older implementations.

word-break for East Asian scripts or aggressive breaking.
white-space which can disable wrapping entirely.
overflow to manage scroll behaviors if text still overflows.