CSS Reference Property

white-space

The white-space property specifies how white space is handled inside an element.

A white space can be a sequence of spaces (entered using the space or the tab keys) or a line break (entered using the carriage return key (or the Enter key), or <br/>). This property will specify how the white spaces in the source code of an element will be handled inside the element when rendered on the page.

When the white-space property is not set, its default value is normal, extra spaces are collapsed into one, new lines are stripped out, and lines are broken and wrap where necessary to fit inside their container. So if, for example, you type 2 consecutive spaces between two words in the editor, they will be collapsed into a single space on the page.

Sometimes you may want to preserve white space inside your element and display it the same way you write it in your code editor. Tabs, spaces and new lines are important when writing code to maintain clarity of the code which benefits from this kind of formatting, so you would normally want the code to be displayed with that same formatting on the page, especially in case you’re writing white-space dependent programming languages. In that case, the value pre forces the browser to maintain any extra white spaces and line breaks and prevents the words from wrapping where you don’t want them to.

The pre value is called like that because it applies the same styling as its HTML equivalent: the <pre> element, which is what is usually used to wrap blocks of code on pages.

Now suppose you do want to maintain spaces around words but also want the words to wrap and not overflow their container, that’s where the pre-wrap comes in. the pre- part tells the browser to maintain white spaces and line breaks, and the wrap part tells it to wrap the lines where necessary to fit into their container.

On the other hand, if you do want to collapse the spaces between words but do not want the lines to wrap, you can apply the nowrap value.

The last value, pre-line, is similar to the pre-wrap value, except that white spaces are collapsed, and only line breaks are preserved. The lines will also wrap to fit their container.

Trivia and Notes

The white-space property can be used with more than just text, it can be applied to any inline content within an element. It is used with the value nowrap sometimes to create a horizontal list of images in a scrollable element, by preventing the images from wrapping and forcing them to be displayed on one single line inside their container.

Official Syntax

  • Syntax:

    white-space: normal | pre | nowrap | pre-wrap | pre-line
  • Initial: normal
  • Applies To: all elements
  • Animatable: yes

Values

normal
Sequences of white spaces are collapsed, new line characters are stripped out, and lines break when needed to fit into their container.
pre
Sequences of white spaces and new lines are preserved. Lines will not wrap or break except where a newline character or a line break using <br/> is in the source code.
nowrap
Sequences of white spaces are collapsed into one as with the normal value, but like pre line breaks are suppressed (lines don’t wrap) within an element.
pre-wrap
Like pre this value preserves sequences of white spaces, but like normal it allows line wrapping, so lines will wrap when needed to fit into their container.
pre-line
Like normal it collapses sequences of white spaces into one but it preserves newline characters, so lines break where a newline character or a <br/> is present in the source code, and they will also wrap when necessary to fit inside their container.

Notes

Note that values such as pre that preserve newline characters will not preserve the last newline character in a piece of text (See demo).

This table summarizes the behavior of the different values of the white-space property:

  New lines Spaces and tabs Text wrapping
normal Collapse Collapse Wrap
pre Preserve Preserve No wrap
nowrap Collapse Collapse No wrap
pre-wrap Preserve Preserve Wrap
pre-line Preserve Collapse Wrap

Examples

.myElement {
    white-space: nowrap;
    overflow-x: scroll;
}

pre {
    white-space: pre-wrap;
}

Suppose you’re writing a poem in your code editor and you’re adding line breaks after each line in the poem. Without setting the white-space property’s value, the browser would normally collapse all white spaces and strip out any line breaks (except those entered using <br/>), so you’d end up with one long paragraph of text, instead of a sequence of lines as you intended your poem to be. In order to prevent the browser from stripping out the newline characters, you can use the pre value, which will force the browser to maintain white spaces and the text formatting you specify in your source code exactly as it is. So our poem would be displayed with the exact same white space formatting as in our source code.

Browser Support

All values are supported in all major browsers (including IE8+).

Written by

Last updated June 3, 2020 at 12:35 pm by Pedro Botelho

Do you have a suggestion, question or want to contribute? Submit an issue.