The Cascading Style Sheets (CSS) white-space property specifies how browsers should handle whitespace characters in HTML source code, and when wrapping should be performed when rendering text. This article explains how the white-space property controls three separate aspects of text rendering, details browser support (both official and experimental) for the five white-space property values, and concludes with a discussion of its future in CSS3.
Values of the white-space property
Three aspects of text rendering are affected by the white-space property:
- Spaces— whether consecutive whitespace characters, such as spaces and tabs, collapse into a single space
- Newlines — whether newline characters are preserved
- Wrapping — whether lines can break when they become too long to fit in their elements’ widths
The following table summarises how the five values of the white-space property correspond to these aspects:
| Spaces | Newlines | Wrapping | |
|---|---|---|---|
| normal | collapse | collapse | may wrap |
| pre | preserve | preserve | won’t wrap |
| nowrap | collapse | collapse | won’t wrap |
| pre-wrap | preserve | preserve | may wrap |
| pre-line | collapse | preserve | may wrap |
Browser support for the white-space property
The following table summarises support for the white-space property in the four major web browsers, with footnotes detailing experimental support:
| IE | Firefox | Opera | Safari | |
|---|---|---|---|---|
| normal | 5.5 | 1.0 | 4.0 | 1.0 |
| nowrap | 5.5 | 1.0 | 4.0 | 1.0 |
| pre | 5.5 1 | 1.0 | 4.0 | 1.0 |
| pre-wrap | — | — 2 | 8.0 3 | 3.0 |
| pre-line | — | — | 9.5 | 3.0 |
- In Internet Explorer the pre value only functions in standards mode and not in quirks mode
- Mozilla 1.0 and 2.0 have experiment support for pre-wrap as -moz-pre-wrap
- Opera 7.0 has experiment support for pre-wrap as -o-pre-wrap, and Opera 4.0, 5.0, and 6.0 have experimental support as -pre-wrap
CSS3, white-space-collapse, and text-wrapping
At the time of writing, CSS3 is still in draft status, and the information in this article is based on the latest draft.
The CSS3 Text module retains the white-space property, but redefines it as a shorthand for the new white-space-collapse and text-wrap properties. The equivalencies between the three properties are as follows:
| white-space | white-space-collapse | text-wrapping |
|---|---|---|
| normal | collapse | normal |
| pre | preserve | none |
| nowrap | collapse | none |
| pre-wrap | preserve | normal |
| pre-line | preserve-breaks | normal |
In addition to allowing combinations not available in previous versions of CSS, CSS3 defines a new option for white space collapsing, and two new options for text wrapping:
- The discard value of the white-space-collapse property instructs the browser to ignore all whitespace characters occuring within the element to which it is applied
- The unrestricted value of the text-wrap property allows the browser to breaks lines anywhere, and not to perform hyphenation
- The suppress value of the text-wrap property instructs browsers to break within an element only if no other break points exist in the same line