| Inherited | Initial | Version |
|---|---|---|
| Yes | normal |
CSS1, 2 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.5+ |
|---|---|---|---|
| Partial | Partial | Full | Full |
Syntax
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.
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
normaldictates that sequences of whitespace will collapse into a single space character. Line breaks will occur wherever necessary to fill line boxes. nowrap- Specifying
nowrapensures that sequences of whitespace will collapse into a single space character, but line breaks will be suppressed. pre- Specifying
preensures 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 likenormalexcept that it’ll honor explicit line breaks. pre-wrap- Specify
pre-wrapto 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 likepreexcept that it’ll wrap the text at the end of line boxes.
Compatibility
| Internet Explorer | Firefox | Safari | Opera | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 1.0 | 1.5 | 2.0 | 1.3 | 2.0 | 3.0 | 9.2 | 9.5 |
| Partial | Partial | Partial | Partial | Partial | Partial | Full | Full | Full | Partial | 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 2 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:
- #3
- Date:
- Sun, 03 May 2009 14:54:46 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
"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."
Please clarify this point, I'm confused because "white-space:nowrap;" is used by one of the writers of this reference (Paul O’Brien) at: http://www.pmob.co.uk/temp/round-cloudtag.htm
What is the proper way to handle such an issue. What are the alternatives?
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.