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 likepre
line breaks are suppressed (lines don’t wrap) within an element. - pre-wrap
-
Like
pre
this value preserves sequences of white spaces, but likenormal
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 PlaygroundBrowser Support
All values are supported in all major browsers (including IE8+).