Whitespace and wrapping: white-space, overflow-wrap, word-break

On this page

Line breaking is decided by three properties together: white-space controls how spaces and newlines are treated, while overflow-wrap and word-break decide where a line may break when it does not fit. They are often conflated because simple examples make them look identical.

The six white-space values

Value	Runs of spaces	Newlines	Wrapping
`normal`	collapsed to one	treated as a space	allowed
`nowrap`	collapsed	treated as a space	not allowed
`pre`	preserved	preserved	not allowed
`pre-wrap`	preserved	preserved	allowed
`pre-line`	collapsed	preserved	allowed
`break-spaces`	preserved, including trailing	preserved	allowed, and spaces can break

A way to remember: the pre family preserves whitespace like the <pre> element, pre-wrap also allows wrapping, and pre-line keeps only the newlines.

pre-wrap and break-spaces differ only in trailing spaces: the former hangs them outside the line, the latter treats them as breakable characters. Visible when rendering chat logs or code diffs.

overflow-wrap: long words

By default an over-long word (a URL, a hash) overflows instead of breaking — Latin scripts only break at spaces and hyphens.

Value	Behaviour
`normal`	break only at normal points; long words overflow
`break-word`	break anywhere when nothing else fits (does not affect `min-content`)
`anywhere`	break anywhere, and participate in `min-content` (the container can shrink further)

word-wrap is the legacy name for overflow-wrap; write overflow-wrap in new code.

word-break: a blunter instrument

Value	Behaviour
`normal`	break by language rules (CJK between characters, Latin between words)
`break-all`	break between any two characters, including inside Latin words
`keep-all`	do not break CJK between characters (Latin unchanged)

break-all suits a fixed-width column of digits or codes; the price is Latin words cut in half. break-word as a word-break value is deprecated — do not use it.

Chinese does not need break-all: CJK text may break between characters by default, as part of the language rules.

hyphens

none: never hyphenate;
manual: only where a soft hyphen  appears in the source;
auto: the browser hyphenates using a dictionary, which requires a correct lang attribute.

hyphens: auto is meaningless for Chinese (no hyphenation) and useful for English typesetting, subject to language packs in the target browser.

text-wrap: making short blocks look better

Value	Use
`wrap`	default
`nowrap`	like `white-space: nowrap`, but affecting only wrapping, not whitespace
`balance`	make the lines of a short block roughly equal, good for headings
`pretty`	avoid a single word alone on the last line

balance suits a few lines only (headings, card titles). Browsers ignore it on long paragraphs because it has a line limit.

Three combinations worth copying

Single-line ellipsis:

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

Long URLs and hashes that must not burst the container:

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

Preserve user-typed newlines and spaces (comments, notes):

.user-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

The six white-space values#

overflow-wrap: long words#

word-break: a blunter instrument#

hyphens#

text-wrap: making short blocks look better#

Three combinations worth copying#