The White-Space Property

The white-space property specifies how tabs, newlines (also known as line breaks), and extra white space in an element's content are handled.

Name:	white-space
Value:	normal | pre | nowrap | pre-wrap | pre-line
Initial:	normal
Applies to:	block elements
Inherited:	yes
Percentages:	N/A

An HTML document may contain unwanted tabs, newlines, and additional white spaces (more than the normal one white space between words). These can be called collectively white-space characters. Usually, you'll want those extra white-space characters to be ignored. The browser does this automatically for you and lays out the text in a way that fits the window. It throws away any extra white spaces at the beginning and end of a paragraph and collapses (combines) all tabs, newlines, and extra white space between words into single white-space characters. In addition, as the window is resized by the user, the browser reformats the text as needed to fit it in the new window size.

For some elements, you may have specifically formatted the text in such a way that includes extra white-space characters. You don't want those characters thrown away or collapsed. HTML offers two simple ways to control white space: the PRE element (which we discussed in Chapter 1, "The Web and HTML") and non-breaking space. Here is a simple example that shows how non-breaking space can be used:

 <P>There will be&nbsp;&nbsp;&nbsp;three spaces before the word "three" no matter what the value of the display property is. Also, there will never be a line break between "be" and "three." 

This results in a presentation like this one:

There will be three spaces before the word "three" no matter what the value of the display property is. Also, there will never be a line break between "be" and "three."

However, if you want more control over white space characters, you need to use the white-space property, and the rest of this chapter describes its various values.

The value "normal" of the white-space property causes all extra white-space characters in the element to be ignored or collapsed. This is the default behavior for all HTML elements, except the PRE element. The behavior of the PRE element is described by the pre value of the WHITE-SPACE property. All browsers, therefore, use this rule internally:

 PRE { white-space: pre } 

If you wonder why tabs are interpreted in this strange way, it has to do with the traditional way tabs are displayed on computer terminals. Especially in the first pages on the Web, the PRE element was mostly used for displaying computer code; that's why it made sense to interpret a tab as a jump to the next multiple of eight.

The pre value causes all extra white space to be retained and newlines to cause line breaks. It also causes tabs to be converted into spaces according to a certain formula. The tab is replaced by from 1 to 8 spaces so that the last one is at a column that is a multiple of 8. For example, suppose there are 52 characters to the left of the tab. The browser inserts 4 spaces to reach the nearest multiple of 8, that is, 56. So, the next character after the tab ends up as the 57th character of the line. This effect is all right when you use a monospaced (fixed-width) font, but it looks strange when it's used with a proportional-spaced (variable-width) font. Here is how it looks with a monospaced font:

 These words have been aligned   with tabs so that    the letters align   nicely? 

And this is with a proportional font. The number of spaces that are inserted is the same, but that doesn't cause the words to be aligned:

 These words have been aligned with tabs so that the letters align nicely? 

The PRE value also suppresses justification. We discuss justification in Chapter 7.

Figure 6.6 compares the results of the normal and pre values on an example paragraph of text.

Figure 6.6. The result of formatting the example paragraph with two values for the white-space property. In (a) with value "normal"; in (b) with value "pre."

Although the value pre can make text look strange it can be a very useful value in other cases. Here is an example that uses the PRE element and a CLASS attribute to create an element that is specialized for simple poems:

 <HEAD>   <TITLE>A poem</TITLE>   <STYLE>     PRE.poem {       white-space: pre;       font-family: serif     }   </STYLE> </HEAD> <BODY>   <H1>A poem</H1>   <PRE > In this little poem all white space counts     therefore this line     and also this were indented with four spaces exactly as much as between this word    and this.</PRE> </BODY> 

Here is the result:

    A poem    In this little poem    all white space counts       therefore this line       and also this    were indented with four spaces    exactly as much    as between this word and this. 

The white-space property has three other values that are not widely used, but are useful when you need them: nowrap, pre-wrap, and pre-line. The last two of these were added in CSS 2.1.

The nowrap value collapses extra white space like normal, but it won't automatically break lines that are too long. Line breaks occur only when there is a <br> in the text. The example paragraph would be all on one line, which is too long to show on this page.

The pre-wrap value behaves like the pre value except that additional line breaks are inserted whenever necessary by the browser. This avoids losing content on the sides when, for example, the browser window is narrow.

The pre-line value behaves like the normal value except that line breaks in the text are honored. So, if you dislike putting BR elements in you code, but would like to insert line breaks at will, this value may be useful.