word-wrap

Definition

The word-wrap CSS property is used to control how long words are handled when they exceed the width of their container. It determines whether long words should break and wrap onto the next line, or if they should overflow and extend beyond the container’s boundaries.

The word-wrap property accepts the following values:

• normal: This is the default value. Long words will not break and will overflow the container if necessary.
• break-word: Long words will break and wrap onto the next line if they exceed the container’s width.

Here’s an example:

.long-text {
  word-wrap: break-word;
}

In this example, the .long-text class sets the word-wrap property to break-word. This ensures that long words within the container will break and wrap onto the next line if they exceed the container’s width.

It’s important to note that the word-wrap property is deprecated in favor of the more widely supported overflow-wrap property. The overflow-wrap property has the same functionality as word-wrap and should be used instead for better cross-browser compatibility.

Here’s an example using the overflow-wrap property:

.long-text {
  overflow-wrap: break-word;
}

Both the word-wrap and overflow-wrap properties are commonly used when dealing with long words or strings of characters that could disrupt the layout or cause horizontal scrolling. By allowing words to break and wrap onto the next line, you can ensure better readability and prevent layout issues in responsive or constrained layouts.

Syntax

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

Values

• normal: break only at normal points.
• break-word: legacy alias for overflow-wrap: break-word.

Practical Examples

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

Legacy property retained for compatibility with older browsers.

<div class="rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-700 shadow-sm" style="max-width: 18rem; word-wrap: break-word;">Fallback <code>word-wrap</code> ensures long tokens break on legacy browsers.</div>

Tips & Best Practices

• Declare both overflow-wrap: anywhere; and word-wrap: break-word; for broader support.
• Migrate to overflow-wrap in modern codebases while keeping word-wrap as a safety net.
• Document the reason for using legacy properties in your codebase for future cleanup.

Accessibility & UX Notes

Same considerations as overflow-wrap—avoid forcing horizontal scrolling.

Browser Support

word-wrap is recognized by older browsers and treats break-word similarly to modern overflow-wrap.

Related

• overflow-wrap (modern equivalent).
• word-break for aggressive splitting.
• white-space when preserving formatting.