CSS: white-space Line Break

white-space Property

The white-space property controls line break at whitespace positions, and whether repeated whitespaces are collapsed into one single whitespace.

Possible values:

normal

• Newline character is ignored.
• Long line is wrapped at the edge.

(Like in p tag.)

pre

• Newline character force a wrap.
• No automatic line wrap.

(Like in pre tag.)

This is very useful, when you have poem, song lyrics, or code, you want line wrap at newline positions, and no need to add br tag at the end of every line.

pre-wrap

• Newline character force a wrap.
• Long line is wrapped.

This is very useful, like pre tag that respect newline char, but also, if line is too long, auto wrap it.

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.

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.

white-space: pre

p {white-space:pre;}

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

• White space sequences are shown as they are.
• Newline character force a wrap.
• The element's width has no effect on the line wrapping.

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 force a wrap.
• Long lines are automatically wrapped.

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 char 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 (Special Characters)〕