CSS Text & Fonts

Text Wrapping

Written by Swapnil RajaPublished 30 Jul 2026

Handle long words, truncation, balanced headings, and multi-line clamping without breaking layouts. The chapter covers long URLs, emergency breaks, language-aware hyphenation, balanced headings, ellipsis, and responsible multi-line clamping.

Text overflow is a content problem expressed through layout. CSS can wrap, hyphenate, clip, or truncate the text, but each choice changes what the reader can see and recover.

Real interfaces receive file names, translated labels, user-generated text, and URLs that are much longer than design placeholders. The first goal is to let content wrap without widening its container. Truncation belongs later, and only where the full value remains available through context, expansion, or another accessible path. This topic also connects with CSS Overflow and Web Fonts & Typography.

Allow text to break safely

Example

css

.message {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.title {
  text-wrap: balance;
}

overflow-wrap: anywhere gives the browser an emergency break point for long URLs or identifiers. Automatic hyphenation depends on the document language, so set the HTML lang attribute.

Single-line truncation

Example

css

.file-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

An ellipsis hides content. Use it only where the full value remains available through nearby context, expansion, or another accessible interaction.

Multi-line clamping

Example

css

.summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Indent wrapped lines deliberately

The each-line keyword applies text-indent after forced line breaks as well as at the start of the block. It does not indent every automatically wrapped visual line.

Example

css

.poem {
  white-space: pre-line;
  text-indent: 1.5em each-line;
}

Text Overflow Properties

Property	Purpose	Example
overflow-wrap	Breaks an otherwise unbreakable string when necessary.	overflow-wrap: anywhere
word-break	Controls where words may break.	word-break: break-all
white-space	Controls collapsing and wrapping of white space.	white-space: nowrap
text-overflow	Signals clipped inline content.	text-overflow: ellipsis
text-indent: each-line	Indents the first line and lines after forced breaks.	text-indent: 1.5em each-line

Complete Example

Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.

Complete runnable example

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Text Wrapping example</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
    }
    main { max-width: 70rem; margin-inline: auto; }
    article, section, aside, form, .card, .panel {
      padding: 1rem;
      border: 1px solid #cbd5e1;
      border-radius: 0.6rem;
    }

.message {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.title {
  text-wrap: balance;
}

.file-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.poem {
  white-space: pre-line;
  text-indent: 1.5em each-line;
}
  </style>
</head>
<body>
  <main><h1 class="title">A balanced heading for a narrow content card</h1><p class="message">https://example.com/a/very/long/unbroken/path/that/must/not/break/the/layout</p><p class="file-name">quarterly-financial-report-final-revised.pdf</p><p class="summary">This longer summary demonstrates a multi-line clamp while keeping the card height under control.</p></main>
</body>
</html>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
overflow-wrap	23	18	49	7
text-wrap: balance	114	114	121	17.5
text-indent: each-line	146	146	121	15

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.

Notes

Clamping is a presentation decision, not a content strategy. Important instructions and validation messages should never be clipped.
Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
Use a fallback when the support table shows that one of your required browsers predates the feature.

Conclusion

Plan how real content wraps before reaching for truncation, and never clip information a user must read.

Test wrapping with the longest plausible content and with the document’s actual language set. Use ellipsis and line clamping for optional previews, never for errors, instructions, prices, or other information a person must understand before acting.

PreviousWeb Fonts & Typography NextCSS Margin