CSS: white-space Line Break

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:

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]