The Complete Guide to CSS Text Wrapping

Understanding Text Overflow and Wrapping Basics

Text wrapping in CSS controls how content flows within its container. When text doesn't fit on a single line, the browser must decide where to break it. Understanding these fundamentals is essential for creating polished typography that enhances readability.

What Is Overflowing Text?

By default, when an unbreakable string such as a very long word exceeds the container width, it overflows past the boundary. This behavior exists because CSS prioritizes data visibility over aesthetics--overflowing text remains readable even if it appears messy. The alternative (clipping with overflow: hidden) could cause content to disappear entirely, which is worse than appearing messy.

The default behavior allows developers to notice and address overflow issues during development, rather than having content silently disappear from users. This is why visible overflow is intentional rather than a bug.

/* Default behavior - text overflows visible */
.overflow-visible {
 overflow: visible;
 white-space: nowrap;
}

/* Alternative - text is clipped */
.overflow-hidden {
 overflow: hidden;
 white-space: nowrap;
}

The min-content Size

Setting an element's width or inline-size to min-content makes it as narrow as the longest unbreakable content within it. This is useful when you want a container to shrink-wrap to its content without overflow, though it may result in very narrow containers with long words.

.box {
 inline-size: min-content;
}

The min-content keyword is particularly valuable for responsive card designs where you want the card to size to its content, or for navigation elements that should never exceed their content width.

Core CSS Text Wrapping Properties

Before exploring the new text-wrap property, it's important to understand the foundational properties that have controlled text wrapping for years. These properties remain essential for specific use cases and provide fallback support for older browsers. Mastering these fundamentals is a key part of professional web development.

overflow-wrap (word-wrap)

The overflow-wrap property controls how words break when they exceed the container width. It accepts several values that determine when and how breaking occurs.

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

The break-word value allows breaking long words at arbitrary points when they overflow the container, enabling the word to continue on the next line. This is the most commonly used value for preventing horizontal overflow from long words or URLs. Without overflow-wrap: break-word, long words would extend beyond their container, potentially causing layout issues.

The legacy word-wrap property is now treated as an alias for overflow-wrap, ensuring backward compatibility with older websites. Modern development should use overflow-wrap for new projects.

word-break

The word-break property provides more aggressive breaking control than overflow-wrap. The break-all value breaks words at any character boundary to prevent overflow, which is useful for CJK (Chinese, Japanese, Korean) text and situations where you must prevent any overflow regardless of aesthetics.

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

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

The difference between overflow-wrap: break-word and word-break: break-all is significant: break-word only breaks when necessary (when a word overflows), while break-all breaks every word regardless of whether it overflows. Use break-all when you need strict width containment and can tolerate aggressive breaking.

/* Comparison: overflow-wrap: break-word vs word-break: break-all */
.break-word-example {
 overflow-wrap: break-word;
 word-break: normal;
 /* Breaks long words only when they overflow */
}

.break-all-example {
 overflow-wrap: anywhere;
 word-break: break-all;
 /* Aggressively breaks every word at character boundaries */
}

white-space

The white-space property controls how whitespace within elements is handled. The nowrap value prevents all wrapping, causing text to flow horizontally indefinitely.

.no-wrap {
 white-space: nowrap;
}

This is useful for marquee effects, breadcrumbs, or any content that should not wrap under any circumstances. Understanding white-space is foundational because it interacts with other wrapping properties--when white-space: nowrap is set, text will not wrap regardless of overflow-wrap or word-break settings.

The New CSS Text Level 4 text-wrap Property

CSS Text Level 4 introduces the text-wrap property, representing a significant advancement in web typography. For over 30 years, the web used a single-line evaluation algorithm--browsers laid out text line by line, wrapping only when necessary without considering the overall paragraph appearance. The new properties enable browsers to evaluate entire passages when deciding where to wrap.

text-wrap: balance

The balance value tells the browser to wrap text so all lines are approximately equal in length, similar to folding paper into equal sections. This is ideal for headlines, captions, and short text blocks where visual harmony matters.

h1, h2, .headline {
 text-wrap: balance;
}

When applied to a heading, text-wrap: balance prevents awkward single words on the last line and creates a more balanced visual block. The browser achieves this by evaluating multiple lines simultaneously rather than processing each line independently.

/* Before: Without text-wrap: balance */
h1.without-balance {
 /* Last line might have just 1-2 words */
}

/* After: With text-wrap: balance */
h1.with-balance {
 text-wrap: balance;
 /* All lines approximately equal length */
}

text-wrap: pretty

The pretty value applies paragraph-level algorithms to improve overall typography. It addresses several traditional typographic concerns:

• Avoiding short last lines: Prevents single words stranded at the end of paragraphs
• Improving the ragged edge (rag): Creates more consistent line lengths
• Reducing poor hyphenation: Minimizes awkward hyphen breaks
• Minimizing typographic rivers: Reduces spaces that align across lines creating distracting patterns

article p, .prose {
 text-wrap: pretty;
}

Safari's implementation of pretty evaluates the entire paragraph rather than just the last four lines (as Chrome does), providing more comprehensive typographic improvement. The property aims to make text look as if it was hand-typeset by a professional typographer.

text-wrap: stable

The stable value maintains the original first-fit algorithm where each line fills completely before wrapping. This is particularly valuable for editable text areas because it prevents content from jumping around as users type.

textarea, [contenteditable] {
 text-wrap: stable;
}

When text is editable, you don't want words shifting positions based on subsequent line changes. Use stable for text inputs, contentEditable areas, or any situation where text content changes dynamically.

text-wrap: auto

The auto value is the current default, using the traditional single-line layout algorithm that has existed since 1991. However, this could change in future browser versions as vendors improve default text wrapping behavior.

text-wrap: avoid-short-last-lines

This upcoming value focuses specifically on preventing short last lines without the broader improvements of pretty. At the time of writing, this value has not yet been implemented in any browser.

Longhand Properties: text-wrap-mode and text-wrap-style

The text-wrap property is a shorthand for two longhand properties that provide independent control over wrapping behavior, allowing for more granular customization of text layout.

text-wrap-style

The text-wrap-style property selects the wrapping algorithm:

.text-style-balance {
 text-wrap-style: balance;
}

.text-style-pretty {
 text-wrap-style: pretty;
}

.text-style-stable {
 text-wrap-style: stable;
}

.text-style-auto {
 text-wrap-style: auto;
}

text-wrap-mode

The text-wrap-mode property controls whether wrapping is enabled at all:

.mode-wrap {
 text-wrap-mode: wrap;
}

.mode-nowrap {
 text-wrap-mode: nowrap;
}

This separation allows developers to change the wrapping style independently from whether wrapping occurs, enabling scenarios like text-wrap-mode: nowrap combined with different style values for special effects.

The text-wrap-mode and text-wrap-style longhands achieved "Baseline Newly Available" status in October 2024 when Chromium added support in version 130.

Controlling Hyphenation

Hyphenation is a powerful tool for creating better-looking text layouts, especially in narrow columns. CSS provides several properties to control when and how words are broken with hyphens.

The hyphens Property

The hyphens property controls how words are hyphenated when they break across lines:

.auto-hyphens {
 hyphens: auto;
}

.manual-hyphens {
 hyphens: manual;
}

.no-hyphens {
 hyphens: none;
}

The manual value requires explicit soft hyphen characters (­ or U+00AD) in the content, while auto allows the browser to automatically insert hyphens based on language rules. For automatic hyphenation to work, you must specify a language on the element or document using the lang attribute.

<p lang="en">This paragraph will have automatic hyphenation based on English rules.</p>

Hyphenation Customization

The hyphenate-character property sets the character used for hyphens:

.custom-hyphen {
 hyphenate-character: '--';
}

The hyphenate-limit-chars property controls the minimum word length for hyphenation and the minimum characters before and after the hyphen:

.limit-hyphens {
 /* min 6 chars total, 3 before hyphen, 2 after */
 hyphenate-limit-chars: 6 3 2;
}

Manual Soft Hyphens

For manual control, insert soft hyphen characters where you want words to break:

<!-- Without soft hyphens -->
<p>Supercalifragilisticexpialidocious</p>

<!-- With soft hyphens -->
<p>Su&shy;per&shy;cal&shy;ifrag&shy;ilis&shy;tic&shy;ex&shy;pi&shy;ali&shy;do&shy;cious</p>

When the browser breaks at a soft hyphen, it displays the hyphen character. When no break occurs, the soft hyphen is invisible, making it perfect for controlling specific break points in URLs, technical terms, or compound words.

The <wbr> Element

The <wbr> (word break opportunity) HTML element indicates where text can break when necessary, without inserting any visible character. Unlike soft hyphens, <wbr> provides a breaking opportunity without changing the text appearance when no break occurs.

<p>https://www.example.com/very/long/url/path/that/needs/breaking-points</p>

<p>https://www.example.com/very/long/<wbr>url/path/<wbr>that/needs/<wbr>breaking-points</p>

This is particularly useful for:

• Long URLs and file paths
• Compound technical terms
• CamelCase identifiers
• Any content where you want to suggest optimal breaking points

The browser will only break at <wbr> positions if needed, maintaining normal text flow when the content fits. This gives developers precise control over breaking points without affecting the layout when breaking isn't necessary.

Browser Support and Considerations

Browser support for the new text-wrap values varies significantly between engines. Understanding these differences helps you make informed decisions about which properties to use and when to provide fallbacks.

Current Browser Support

Chrome, Edge, and Chromium-based browsers support balance and pretty with some limitations--Chromium's pretty only evaluates the last four lines of paragraphs. Safari has implemented a more comprehensive pretty algorithm that evaluates entire paragraphs.

The text-wrap-mode and text-wrap-style longhands achieved "Baseline Newly Available" status in October 2024 when Chromium added support in version 130.

Feature Detection

Use feature detection with @supports to provide graceful degradation for unsupported browsers:

@supports (text-wrap: balance) {
 h1, h2, h3 {
 text-wrap: balance;
 }
}

@supports (text-wrap: pretty) {
 article p {
 text-wrap: pretty;
 }
}

Fallback Strategy

For older browser support, combine new properties with traditional ones:

h1 {
 text-wrap: balance;
 overflow-wrap: break-word;
}

p {
 text-wrap: pretty;
 overflow-wrap: break-word;
}

This ensures long words still break appropriately in older browsers while providing the improved wrapping where supported.

Performance Considerations

Performance impact varies by text-wrap value and content length. Understanding these considerations helps you make optimal choices for different contexts.

Algorithm Complexity

The balance algorithm has minimal performance impact because it only evaluates a small number of lines--typically headlines have just 2-5 lines. The pretty algorithm evaluates more lines, which could theoretically impact performance on extremely long paragraphs (hundreds or thousands of lines), though this is uncommon in typical web content.

For editable content or animations that trigger frequent re-layouts, use text-wrap: stable to ensure the fastest wrapping algorithm is used. This is important for real-time editing performance.

When Performance Matters More

• Long articles: Test pretty on your specific content before deploying
• Live text editing: Always use stable
• Animations that resize text: Test thoroughly or use stable
• Typical website content: No performance concerns with either value

As WebKit notes, your text element would need to be many hundreds or thousands of lines long to see a performance hit--and that kind of content is unusual on the web. If your content is broken up into typical-length paragraphs, you have no reason to worry.

Practical Implementation Examples

Balancing Headlines

Apply text-wrap: balance to headlines and other short text blocks to prevent awkward single-word last lines:

h1, h2, h3, .headline {
 text-wrap: balance;
}

This works best for content with 2-5 lines of text. Applying it to long paragraphs would result in each paragraph having a different width, which is rarely desirable.

Improving Paragraph Readability

Apply text-wrap: pretty to body text for improved typographic quality:

article p, .prose {
 text-wrap: pretty;
}

Combine with other typographic properties for best results:

p {
 text-wrap: pretty;
 hyphens: auto;
 lang: en;
}

Responsive Text Wrapping

The text-wrap property responds naturally to container width changes without additional media queries:

h1 {
 font-size: 2.5rem;
 text-wrap: balance;
}

@media (max-width: 600px) {
 h1 {
 font-size: 2rem;
 text-wrap: balance;
 }
}

Containing Long Words and URLs

For content that may contain long words or URLs, ensure they don't overflow:

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

For languages that require strict breaking (CJK text), use word-break: break-all instead.

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>CSS Text Wrapping Demo</title>
 <style>
 /* Headlines with balance */
 h1 {
 text-wrap: balance;
 overflow-wrap: break-word;
 }
 
 /* Body text with pretty */
 article p {
 text-wrap: pretty;
 hyphens: auto;
 }
 
 /* Code snippets and long words */
 code, .long-word {
 overflow-wrap: break-word;
 word-break: break-all;
 }
 
 /* Editable areas */
 textarea, [contenteditable] {
 text-wrap: stable;
 }
 </style>
</head>
<body>
 <article>
 <h1>Understanding CSS Text Wrapping</h1>
 <p>Modern CSS provides powerful tools for controlling how text flows within containers...</p>
 </article>
</body>
</html>

When to Use Each Value

Quick Reference Guide

Common Mistakes to Avoid

Don't use balance on long paragraphs: Each paragraph would have a different width, creating an inconsistent and unprofessional appearance.

Don't use pretty on headlines: It prioritizes overall paragraph improvement over equal line lengths, which is unnecessary for short text.

Don't forget language attributes: Hyphenation requires lang attributes to work properly.

Don't rely solely on new properties: Always provide fallbacks with traditional properties for maximum compatibility.

Conclusion

CSS text wrapping has evolved from a simple line-by-line algorithm to sophisticated paragraph-level typography. The new text-wrap property with its balance and pretty values enables developers to create more professional, readable text layouts without manual intervention or JavaScript workarounds.

Combined with overflow-wrap, word-break, and hyphenation controls, modern CSS provides comprehensive tools for controlling text flow in any design scenario. These properties work together to solve decades-old typographic challenges that previously required complex workarounds or acceptance of poor typography.

As browser support continues to improve, these properties will become standard tools in every developer's toolkit. Start using them today with appropriate fallbacks to ensure graceful degradation in unsupported browsers. Your users--and your designs--will benefit from the improved typography.

The future of web typography is here. Embrace these new capabilities to create layouts that rival professional print design. For teams looking to implement these techniques in their projects, our web development services can help you build modern, accessible websites that leverage the latest CSS advances.