A Complete Guide to CSS Word Wrap, Overflow Wrap, and Word Break

Handling long words and preventing text overflow is a common challenge in web development. When a word is too long to fit within its container, CSS provides several properties to control how that text breaks.

This guide covers overflow-wrap (formerly word-wrap), word-break, and related techniques for managing text overflow in your layouts.

Understanding Text Overflow

By default, CSS will display overflowing text outside its container rather than breaking it. While this ensures content remains visible, it can break layouts and create horizontal scrollbars on narrow screens. Long words, URLs, and technical terms are common culprits of overflow issues.

When a container is too narrow for its content, you have two choices: allow the overflow or control how words break. The CSS properties covered in this guide give you precise control over word breaking behavior.

The overflow-wrap Property

The overflow-wrap property (originally named word-wrap, which is now treated as an alias) determines how to handle overflow when a word is too long to fit within its container.

Values

Example:

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

The break-word value is generally preferred for most use cases because it maintains readability while preventing layout issues.

For more details, see the MDN Web Docs on overflow-wrap.

The word-break Property

The word-break property controls how words break at character boundaries, affecting all words including those that would normally fit.

Values

Example:

.container {
 word-break: break-all;
}

The break-all value is more aggressive than overflow-wrap: break-word and will break words even when unnecessary. Use this for technical content, code snippets, or languages without natural word boundaries.

Learn more about word-break in the MDN Web Docs.

Key Differences Between overflow-wrap and word-break

Understanding the distinction between these properties is crucial for choosing the right approach:

• overflow-wrap: break-word is conservative - it only breaks words when absolutely necessary to prevent overflow. The browser tries to keep words intact and only introduces a break point if the word cannot fit on its own line.

• word-break: break-all is aggressive - it breaks words at any character boundary, even for words that would fit on their own line. This can lead to mid-word breaks that look unnatural in prose text.

The overflow-wrap property is generally preferred for content where readability matters, while word-break: break-all is more suitable for technical content, code snippets, or languages without natural word boundaries.

For professional web development projects, choosing the right text-breaking strategy is essential for creating responsive layouts that look great on all devices.

See this comparison on GeeksforGeeks for visual examples.

The <wbr> Element for Manual Line Breaks

For manual control over line breaks, HTML provides the <wbr> (word break opportunity) element. This empty element indicates where a line break can occur within text.

Example:

<p>https://www.example.com/some/very/long/path/<wbr>that/<wbr>needs/<wbr>breaks</p>

This approach is particularly useful for:

• Long URLs where you want to suggest optimal break points
• File paths that may overflow narrow containers
• Technical terms where specific breaks make the content more readable

The browser will only break at <wbr> points if needed to prevent overflow, giving you fine-grained control while respecting the browser's wrapping algorithm. Combined with proper responsive design techniques, this creates robust text layouts.

More details are available in the MDN Web Docs on text wrapping.

Hyphenation with the hyphens Property

The hyphens property controls whether hyphenation is allowed when words wrap, making broken words look more natural and readable.

Values

Example:

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

For hyphens: auto to work properly, you need to set a valid lang attribute on your HTML document or specific elements.

Soft Hyphens

The soft hyphen character ­ creates an invisible break point with a hyphen that only appears when the word wraps:

<p>super&shy;califragilisticexpiali&shy;docious</p>

This gives you precise control over hyphenation points while keeping the source text readable. Expert CSS developers often combine these properties for polished typography.

See the MDN Web Docs for more information.

Practical Use Cases

Long URLs and Technical Terms

For containers holding URLs or technical terms, use overflow-wrap: break-word to prevent overflow while maintaining readability:

.code-block, .url-container {
 overflow-wrap: break-word;
 word-break: break-word;
}

Narrow Columns and Mobile Layouts

On narrow screens or in column layouts, break-word helps prevent horizontal scrolling:

.sidebar, .card-text {
 overflow-wrap: break-word;
}

Proper text wrapping is essential for mobile-first development where screen real estate is limited.

International Content with CJK Text

For multilingual sites with CJK (Chinese, Japanese, Korean) content, be mindful of how word-break affects these scripts:

.multilingual-content {
 word-break: keep-all;
 overflow-wrap: break-word;
}

Using word-break: keep-all ensures CJK text doesn't break unexpectedly, while overflow-wrap handles non-CJK content appropriately.

Browser Compatibility

All properties covered in this guide have excellent browser support across modern browsers:

The word-wrap property works as an alias for overflow-wrap in all browsers, so legacy code will continue to function correctly.

For older browser support, test your specific use cases, but these properties are considered stable and widely supported. Ensuring proper cross-browser compatibility remains an important part of quality web development.

Check the MDN Web Docs for the latest compatibility information.

Sources

1. MDN Web Docs - Wrapping and breaking text
2. MDN Web Docs - overflow-wrap property
3. MDN Web Docs - word-break property
4. LogRocket - Complete guide to CSS word-wrap, overflow-wrap, and word-break
5. GeeksforGeeks - CSS word-break vs word-wrap (Overflow Wrap)
6. Shadecoder - What is word break: a practical guide for 2025