white-space (CSS property)

Spec
Inherited Initial Version
Yes normal CSS1, 2
Browser support (more…)
IE8+ FF3.5+ SA1.3+ OP9.5+ CH2+
Full Full Full Full Full

Syntax

white-space: { normal | nowrap | pre | pre-line | pre-wrap | inherit } ;

Description

This property controls the handling of whitespace inside an element. Whitespace is a collective name for one or more occurrences of the characters space, tab, line feed, carriage return, and form feed. Typically, within an HTML element, user agents will collapse a sequence of whitespace characters into a single space character.

Note that this property only handles whitespace characters; a common beginner’s mistake is to try to use it to prevent floated elements from dropping down if there isn’t enough room on a line. If white-space nowrap is added to a floated element the whitespace characters within that float (typically the space between text) would be prevented form wrapping. It would not stop the floated elements themselves from behaving as they normally would.

Example

This style rule makes elements that belong to the "poetry" class retain and render all whitespace in the document markup:

.poetry {
  white-space: pre;
}

Value

normal
A value of normal dictates that sequences of whitespace will collapse into a single space character. Line breaks will occur wherever necessary to fill line boxes.
nowrap
Specifying nowrap ensures that sequences of whitespace will collapse into a single space character, but line breaks will be suppressed.
pre
Specifying pre ensures that sequences of whitespace won’t collapse. Lines are only broken at new lines in the markup (or at occurrences of "\a" in generated content).
pre-line
This value will cause sequences of whitespace to collapse into a single space character. Line breaks will occur wherever necessary to fill line boxes, and at new lines in the markup (or at occurrences of "\a" in generated content). In other words, it’s like normal except that it’ll honor explicit line breaks.
pre-wrap
Specify pre-wrap to ensure that sequences of whitespace won’t collapse. Line breaks will occur wherever necessary to fill line boxes, and at new lines in the markup (or at occurrences of "\a" in generated content). In other words, it’s like pre except that it’ll wrap the text at the end of line boxes.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Partial Partial Partial Full Partial Partial Partial Partial Full Full Full Full Full Partial Full Full Full

Internet Explorer for Windows versions up to and including 7 don’t support the values pre-line or pre-wrap. The values normal and pre behave like pre-wrap on textarea elements. The value nowrap behaves like pre-line on textarea elements.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

Firefox versions up to and including 3.0 don’t support the values pre-line and pre-wrap (although -moz-pre-wrap is similar to the latter). The values normal, nowrap, and pre behave like pre-wrap on textarea elements.

Opera 9.2 and prior versions don’t support the value pre-line. The values normal and pre behave like pre-wrap on textarea elements. The value nowrap behaves like pre-line on textarea elements.

User-contributed notes

ID:
#6
Contributed:
by waldemarweber
Date:
Tue, 19 Oct 2010 11:04:51 GMT

The line, "prevented form wrapping," in the second paragraph of the white-space description should read, "prevented from wrapping."

--Waldemar

ID:
#5
Contributed:
by Louis Lazaris
Date:
Wed, 10 Feb 2010 03:43:06 GMT

In the 2nd paragraph of the description, one sentence partly reads "prevented form wrapping", but should read "prevented from wrapping".

Related Products