CSS white-space

CSS white-space (not whitespace) controls the way CSS treats spaces, tabs and line breaks and whether or not to wrap wrap text at these characters. Whitespace characters (spaces, tabs and newlines) are collapsed into a singe space by default, with the exception of elements like [[<pre>]] tags. Collapsing whitespace means that newlines have no effect and any sequence of tabs and spaces counts as a single space. whitespace overrides this behaviour on any element, allowing to preserve or collapse whitespace at will. It also controls wether or not text can be broken at a whitespace character. Most elements break text at spaces by default.

white-space: normal|nowrap|pre|pre-wrap|pre-line
white-space: nowrap;      /* collapse whitespace, don't wrap */
white-space: pre;         /* preserve whitespace, don't wrap */
white-space: pre-wrap;    /* preserve whitespace, wrap */

The easy way to put it is:

  • normal is ... well, the default. Spaces, tabs and newline (\n) characters are collapsed into a single space, but <br> is honored.
  • nowrap is the same but text is never wrapped. It will be all in a single line.
  • pre behaves just like a <pre> tag. It honors whitespace, newlines and <br> tags, but it won't wrap text automatically and it may overflow.
  • pre-wrap is same as pre but it wraps text so that it doesn't overflow (except long strings, see below).
  • pre-line is same as pre-wrap but it collapses spaces and tabs only.

Browser Support: Full

pre vs pre-wrap

<pre> containers and elements with whitespace: pre preserve spaces and tabs but do not break text automatically:

div.pre {
white-space: pre;
}
The text in this div overflows because white-space: pre doesn't wrap it. It only breaks in newlines and <br>s

pre-wrap behaves exactly the same only that it does break text automatically:

div.pre-wrapped {
white-space: pre-wrap;
}
The text in this div does break nicely thanks to pre-wrap. It also preserves newlines and tabs.

White-space won't Prevent Long Strings from Overflowing

white-space affects whitespace and nothing else. Long strings with no spaces, like URLs won't be wrapped:

div.wrapped {
white-space: pre-wrap;
}
extremely_long_string_without_spaces_that_doesnt_fit_in_one_line_and_overflows

The overflow-wrap property (alias word-wrap) is the one for the job:

div.wrapped {
white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;
}
extremely_long_string_without_spaces_that_doesnt_fit_in_one_line_and_doesnt_overflow

white-space vs hyphens vs overflow-wrap

These CSS properties may be confused because all of them can be used to wrap text. However:

  • white-space controls wrapping only at whitespace characters (spaces, tabs, newlines, <br>s).
  • hyphens allows breaking and hyphenating words following language rules. It has nothing to do with whitespace.
  • overflow-wrap controls breaking only in the case of overflow.

There are cases in which they do interfere. white-space: pre and white-space: nowrap ignore the "wrapping opportunities" introduced by hyphens and overflow-wrap so they won't have an effect. Values of white-space that allow wrapping, like pre-wrap can use both hyphenation and "overflow wrapping".

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>