CSS: white-space Line Break

white-space Property

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

• Newline character is ignored.
• Long line is automatically wrapped at the edge.
• Like in p tag.

pre

• Newline character forces a wrap.
• No automatic line wrap.
• Like in pre tag.

pre-wrap

• Newline character forces a wrap.
• Long line will also be wrapped.
• Like HTML p and pre combined.

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 XML Entities List〕