Controlling White Space

As I already mentioned, 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> tag) using the white-space property (Table 4.10).

Table 4.10. White-Space Values




IE5[*], FF1, S1, O4, CSS1


IE5[*], FF1, S1, O4, CSS1


IE5[*], FF1, S1, O4, CSS1

[*] IE5.5 for Windows

This example (Figure 4.9) shows a poem shaped like a curvy mouse tail. If the white-space property value is assigned pre for the poem class, all those spaces collapse (Figure 4.10). However, if assigned a value of nowrap, the spaces and line breaks are ignored, and the text will stretch as far to the right on the page as needed (Figure 4.11).

Figure 4.9. The white-space property keeps all spaces so the poem retains its distinctive mousetail-like shape rather than collapsing.

Figure 4.10. Without the pre value, the spaces collapse, as does the tail.

Figure 4.11. With the no-wrap value, the poem stretches vertically across the window, forcing a horizontal scroll to accommodate its width.

To define white space:



Type the white-space property name, followed by a colon (:), in the CSS definition list (Code 4.9).

Code 4.9. Adding white-space: pre to the paragraph tag means that all of the spaces will be displayed.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " DTD /xhtml1-strict.dtd"> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS, DHTML &amp; Ajax | Controlling White Space</title> <style type="text/css" media="screen"><!-- body {      font-size: 1.2em;      font-family: Georgia, "Times New Roman", times, serif;      white-space: normal; } p.poem {      white-space: pre; } --> </style> </head> <body>      <p > <img src="/books/3/292/1/html/2/alice08.gif" width="200" height="131" alt="Alice" />               'Fury said to a              mouse, That he            met in the          house,          "Let us        both go to          law: I will            prosecute              YOU. --Come,             I'll take no              denial; We           must have a           trial: For        really this         morning I've        nothing       to do."         </p>      </body> </html>



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

  • pre, which preserves multiple spaces

  • nowrap, which prevents line wrapping without a <br /> tag

  • normal, which allows the browser to determine how spaces are treated; this setting usually forces multiple spaces to collapse into a single space


  • Do not confuse the <nobr> and <pre> tags with the white-space property values of nowrap and pre. Although they basically do the same thing, the HTML tags are being phased out (deprecated) or are not a part of the HTML specification and should not be used.

  • The text content of any tag that receives the nowrap value runs horizontally as far as it needs, regardless of the browser 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 preventing content from wrapping in table data cells.

CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230 © 2008-2017.
If you may any questions please contact us: