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.

Live Demo

View this demo on the Codrops Playground

Browser Support

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