CSS: white-space Line Break

By Xah Lee. Date: . Last updated: .

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:

respect newline charpreserve spaces and tabswrap long lineEnd-of-line spaces
normalnonoRemove
prenoPreserve
pre-wrapHang
pre-linenoRemove
break-spacesWrap
nowrapnononoRemove

white-space: normal

p {white-space:normal;}

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

white-space: pre

p {white-space:pre;}

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

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: XML Entities (Special Characters)

CSS, overflow, line wrap