CSS: white-space Line Break

By Xah Lee. Date: . Last updated: .

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:

[see CSS: Reset, Default Values]

Summary:

New linesSpaces and tabsText wrappingEnd-of-line spaces
normalCollapseCollapseWrapRemove
prePreservePreserveNo wrapPreserve
pre-wrapPreservePreserveWrapHang
pre-linePreserveCollapseWrapRemove
break-spacesPreservePreserveWrapWrap
nowrapCollapseCollapseNo wrapRemove

white-space: normal

p {white-space:normal;}

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

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.

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.

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;}

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 &nbsp;. [see HTML Entity List]

JS in Depth
XAH  BUY NOW

CSS

Basics

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc