The white-space Property

The white-space property specifies with the way the browser should handle whitespace.

The space character, the carriage return, the line feed character and the tab character are the whitespace characters that are affected by the white-space property. The following whitespace characters are not affected by the white-space property: non-breaking space ( ), em space ( ), en space ( ) and thin space ( ).

The white-space property can be applied to any element. It takes any one of the following values: normal, pre, nowrap, pre-wrap, pre-line, and inherit. The inital value is normal. white-space is an inherited property.

white-space:normal

This is the initial value of the property and therefore specifies the default whitespace handling of the browser.

By default, the browser handles whitespace characters found within an element (whose contents are displayed as text) in this way:

• Single or multiple space characters are displayed as a single space.
• Single or multiple tab characters are displayed as a single space.
• Single or multiple carriage return characters are displayed as a single space.
• Single or multiple line feed characters are displayed as a single space.
• Any combination of the above mentioned characters — space, tab, carriage return, and line feed, are displayed as a single space.
• The following whitespace character entities are displayed as many times as they appear in the element:  ,  ,   and  . That is, the browser does not reduce multiple instances of these character entities into a single space.
• Spaces in the text that would appear at the end and at the beginning of lines are not displayed.

The white-space:normal declaration is used to restore the default whitespace handling in an element when a different white-space declaration was either specified or inherited.

Example 1: <div style="font-family:'Times New Roman';font-size:35px;white-space:pre"><p style="white-space:normal">the five boxing wizards jump quickly the quick</p></div>

 

white-space:pre

This declaration causes the browser to "preserve" the whitespace in an element and to prevent automatic line wrapping. That is, with this declaration, all the whitespace characters are displayed as many times as they appear in the element and only carriage return characters, line feed characters, carriage return - line feed pairs and line break tags (<br>) cause the browser to start new lines.

Note: In Firefox 3, Firefox 3.5, Safari 4, Chrome 3 and Opera 10, with white-space:pre, every line that is displayed ends with either a carriage return character, a  line feed character or a carriage return - line feed pair. However in Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, with white-space:pre, if the text in an element starts with a newline character or character sequence, the browser does not display the blank line. This is a bug.

Example 2: <p style="font-family:'Times New Roman';font-size:35px;white-space:pre"> the five boxing <span>wizards jump</span> quickly<br> over </p>

 

white-space:nowrap

This declaration prevents the automatic wrapping of lines. However, line break tags (<br>) still create new lines. This declaration does not alter the way white space is handled.

Example 3: <p style="font-family:'Times New Roman';font-size:35px;white-space:nowrap"> the quick brown fox jumps over the lazy dog the five boxing wizards jump<br> quickly</p>

 

white-space:pre-wrap

This declaration causes the browser to "preserve" the whitespace in an element and, unlike white-space:pre, does not prevent automatic line wrapping. That is, with this declaration, all the whitespace characters are displayed as many times as they appear in the element, the browser automatically wraps lines, and carriage return characters, line feed characters, carriage return - line feed pairs and line break tags (<br>) cause the browser to start new lines.

Example 4: <p style="font-family:'Times New Roman';font-size:35px;white-space:pre-wrap">the quick brown fox jumps over the lazy dog the five boxing wizards jump<br> quickly</p>

Note: Internet Explorer 6 and Internet Explorer 7 ignore the white-space:pre-wrap declaration.

white-space:pre-line

This declaration causes the browser to automatically wraps lines, and start new lines with carriage return characters, line feed characters, carriage return - line feed pairs and line break tags (<br>). Unlike white-space:pre however, space characters and tab characters are handled according to the browser's default whitespace handling rules.

Example 5: <p style="font-family:'Times New Roman';font-size:35px;white-space:pre-line">the quick brown fox jumps over the lazy dog the five boxing wizards jump<br> quickly</p>

 

Note: Firefox 3, Internet Explorer 6 and Internet Explorer 7 ignore the white-space:pre-line declaration.

white-space inheritance

white-space is an inherited property, all descendants of an element inherit its white-space declaration.

Example 6: <div style="white-space:pre"><p style="font-family:'Times New Roman';font-size:35px"> the five boxing <span>wizards jump quickly</span> the quick</p></div>

white-space:inherit

This declaration is used to override another white-space declaration that is applied to an element and to restore the default behavior of inheriting the ancestor elements' white-space declaration.

Note: Internet Explorer 6 and Internet Explorer 7 ignore white-space:inherit declarations.

Concluding Notes

white-space:pre-wrap and white-space:inherit must be avoided because Internet Explorer 6 and Internet Explorer 7 ignore these declarations.

white-space:pre-line must be avoided because Firefox 3, Internet Explorer 6 and Internet Explorer 7 ignore it.

If the text in an element that has the declaration white-space:pre, starts with a newline character or character sequence, Internet Explorer 8 and below do not display the blank line. Therefore, elements that have white-space:pre should not start with a newline character or character sequence.