• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Text Controls > Controlling White Space

Controlling White Space

As mentioned in "Indenting Paragraphs" earlier in this chapter, browsers in the past have collapsed multiple spaces into a single space unless the <pre> tag was used. CSS lets you allow or disallow the collapsing of spaces, as well as designate whether text can break at a space (similar to the <nobr> HTML tag).

In this example (Code 4.9 and Figure 4.9), the text has been spaced in odd configurations. If the white-space attribute were not defined for the style, all those spaces would collapse (Figure 4.10).

Code 4.9. Adding "white-space: pre" to the paragraph tag means that all of the spaces will be displayed unless the class .collapse is used, which then allows only one space between characters.

Figure 4.9. White space allows you to space text and graphics exactly the way you want them. Notice that the picture of Alice has been pushed over with spaces.

Figure 4.10. Without the style, the white spaces collapse.

Table 4.10. white-space Values
Value Compatibility
normal IE5[1], N4, CSS1
pre IE5[1], N4, CSS1
nowrap IE5[1], N6, CSS1

[1] IE5.5 for Windows

To define white space for a selector:


Type the property name, followed by a colon (:), in the CSS definition list.


Type one of the following values (Table 4.10) to designate how you want spaces in text to be handled:

  • pre, which preserves multiple spaces.

  • nowrap, which prevents line wrapping without a break tag.

  • normal, which allows the browser to determine how spaces are treated. This settings usually forces multiple spaces to collapse into a single space.


The text content of any tag that receives the nowrap value runs horizontally as far as it needs, regardless of the window's width. The user may be forced to scroll horizontally to read all the text, so this setting is usually frowned upon.


nowrap is great for keeping lines of text in tables together regardless of the width of the table data cell.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint