CSS Line Breaks and Text Wrapping: A Practical Guide

This article covers how to control line breaks and text wrapping in CSS.

The short answer: white-space controls whether breaks happen at all, overflow-wrap stops long strings from overflowing, and text-wrap improves where the breaks land.

▼Which property to reach for

Controlling line breaks

Preserving the breaks in your HTML

To show line breaks exactly as they appear in the source, set white-space to pre-line.

.example {
  white-space: pre-line;
}

pre preserves breaks too, but it behaves differently in two other ways.

▼How the white-space values differ

For body text, use pre-line. Because pre disables automatic wrapping, a long line will push past its container and force horizontal scrolling.

When rendering user-submitted text stored in a database, pre-line or pre-wrap both work. Choose pre-wrap if leading spaces matter, such as in pasted code.

Preventing line breaks

Set white-space to nowrap to keep everything on one line.

.example {
  white-space: nowrap;
}

The overflow is not clipped — it spills out of the container. To truncate with an ellipsis instead, all three of these are required:

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

text-overflow: ellipsis does nothing unless both overflow: hidden and white-space: nowrap are also set. Missing any one of them is the usual reason the ellipsis fails to appear.

Wrapping long strings

To stop long URLs and unbroken strings from overflowing, use overflow-wrap: break-word.

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

word-wrap is the old name for overflow-wrap

word-wrap and overflow-wrap are the same property, not two different techniques.

word-wrap was Internet Explorer’s proprietary version. When the behaviour was standardised it was renamed overflow-wrap. Browsers still accept the old name for compatibility, but write overflow-wrap in new code and do not bother declaring both.

overflow-wrap versus word-break

overflow-wrap only breaks a word when it would otherwise overflow. word-break: break-all breaks at any point, whether or not there is a problem.

▼The difference

Use overflow-wrap: break-word for prose. word-break: break-all chops English words apart without regard for meaning, which makes text noticeably harder to read.

There is also overflow-wrap: anywhere. It breaks in the same places as break-word, but unlike break-word it is taken into account when the browser calculates the element’s minimum content width. If a flex or grid item is refusing to shrink, anywhere is the value that fixes it.

Breaking Japanese text at natural points

word-break: auto-phrase makes the browser break Japanese lines at phrase boundaries rather than wherever the line happens to run out.

.example {
  word-break: auto-phrase;
}

Japanese is written without spaces between words, so browsers default to filling each line and breaking at whatever character comes next. That regularly splits a word down the middle.

auto-phrase uses a machine-learning model to find phrase boundaries and prefers to break there. The effect is most visible in headings and short pieces of copy, where a mid-word break is obvious.

The element must carry lang="ja", or the property does nothing.

<html lang="ja">

It has been available since Chrome 119, and as of September 2026 it is Chromium-only and applies to Japanese only. Unsupported browsers simply break lines as before, so it is safe to add without a fallback.

Avoiding a single word on the last line

text-wrap improves where breaks land in the general case.

h2 {
  /* even out line lengths; for headings */
  text-wrap: balance;
}

p {
  /* avoid a very short final line; for body text */
  text-wrap: pretty;
}

balance equalises the length of each line and is meant for short, multi-line blocks such as headings. pretty is for body copy and stops the last line ending on a single word.

Because balance is expensive to compute, browsers cap the number of lines it applies to, so it will not take effect across a long article. Use balance on headings and pretty on paragraphs.

Choosing the right property

Overflowing content is an overflow-wrap problem. Whether breaks happen at all is a white-space problem. Where they land is a word-break and text-wrap problem.

A common mistake is reaching for word-break: break-all to fix a layout overflow, which then makes every English word breakable. Try overflow-wrap: break-word first — if it solves the overflow, stop there.

For the specific case of long URLs breaking a layout, one line is enough:

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

Wrapping is usually configured alongside indentation. Creating a hanging indent in CSS covers aligning the wrapped lines once they start wrapping.

If you would rather not hand-write this layer of CSS, CSS Grid updates and how to apply them looks at what Bootstrap and Tailwind each handle for you.