CSS: white-space Line Break

By Xah Lee. Date: 2005-11-30. Last updated: 2020-06-29.

The white-space property lets you control when to break a line at whitespace positions, and whether repeated whitespaces are collapsed into one single whitespace.

Possible values:

normal: Normal, like HTML p tag.
pre: Like HTML pre tag. Newline character forces a wrap.
pre-wrap: Like HTML p and pre combined. Newline character forces a wrap, otherwise long line will also be wrapped.
pre-line: Like pre-wrap, but repeated spaces are shrinked into just one space.
break-spaces: Same as pre-wrap, except that: • Any sequence of preserved white space always takes up space, including at the end of the line. • A line breaking opportunity exists after every preserved white space character, including between white space characters. • Such preserved spaces take up space and do not hang, and thus affect the box's intrinsic sizes (min-content size and max-content size).
nowrap: No wrap.

Global values:

inherit
initial
unset

[see CSS: Reset, Default Values]

Summary:

	New lines	Spaces and tabs	Text wrapping	End-of-line spaces
`normal`	Collapse	Collapse	Wrap	Remove
`pre`	Preserve	Preserve	No wrap	Preserve
`pre-wrap`	Preserve	Preserve	Wrap	Hang
`pre-line`	Preserve	Collapse	Wrap	Remove
`break-spaces`	Preserve	Preserve	Wrap	Wrap
`nowrap`	Collapse	Collapse	No wrap	Remove

white-space: normal

p {white-space:normal;}

This is the normal behavior of the paragraph element <p>.

Repeated spaces shrink into a single one.
Newline character is equivalent to a space.
Text longer than the element's width are wrapped.

Note that white spaces are any of space, tab, and newline characters. You can always use <br> element to force a line break.

white-space: pre

p {white-space:pre;}

With white-space: pre, the behavior is the same as the <pre> element.

White spaces are shown as they are. (they do not shrink into one)
Newline character will force a wrap.
The element's width has no effect on the line wrapping.

pre is best used for showing computer program code, or poetry of short lines.

white-space: pre-wrap

p {white-space:pre-wrap; width:60ch}

With white-space:pre-wrap, it's like mix of pre, and normal.

Repeated spaces are NOT shrinked into just one space.
Newline will force a wrap.
Very long lines will be automatically wrapped too, by the element's width.

This is very useful for computer code, even better than pre, because if you have a long line comment, it'll be wrapped in the display, but when user copies the code, there will not be extra newline. For example:

# python 3
# Here is a very long comment.  long01 long02 long03 long04 long05 long06 long07 long08 long09 long10 long11 long12 long13 long14 long15 long16 long17
print (5)

white-space: pre-line

This is just like pre-wrap, except that repeated spaces are shrinked into just one space.

white-space: nowrap

p {white-space:nowrap; width:60ch;}

Repeated spaces shrink into a single one.
Newline is equivalent to space. (no wrap)
The element's width has no effect on line wrapping.
All text becomes one single very long line, even longer than window width.
No wrap whatsoever.
The only wrap is if you have <br>.

Non-Breaking Whitespace

To prevent a line wrap at positions you do not want to happen, use the Unicode character named NO-BREAK SPACE. Its decimal value is 160, hexadecimal is A0. The HTML entity is  . [see HTML Entity List]