white-space

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Partially Partially Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS1
Default value normal
Inherited Yes
Applied To block elements
HTML analog <PRE> <NOBR>
Reference to specification http://www.w3.org/TR/CSS21/text.html#propdef-white-space

Description
The parameter white-space determines how to display spaces between words. Usually any quantity of blanks in code HTML is shown on web page as one. An exception is the tag <PRE>, the text placed in this container is deduced with all spaces as it has been formatted by the user. Thus, white-space simulates work of the tag <PRE>, but unlike it does not change a font on mono-widthed font.

Syntax

white-space: normal | nowrap | pre

Arguments
normal
The text in a browser window is deduced as usually. Lines carries are determined automatically.
nowrap
Lines carries in the code HTML are ignored. All text is displayed in one line, at the same time addition of the tag
transfers the text on a new line.
pre
The text is shown taking into account all spaces and carries as they have been added by the developer in code HTML. If the line turns out too long and it is not located in a browser window, in this case the horizontal strip of scrolling will be added.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>white-space</title>
  <style type="text/css">
   P.example {
    border: 1px dashed #634f36; /* Frame parameters */
    background: #fffff5; /* Background color */
    font-family: "Courier New", Courier, monospace; /* Font family */
    padding: 7px; /* Fields around the text */
    margin: 0px 0px 1em; /* Indents */
    white-space: pre; /* All spacings and hyphens are taken into account */ 
   } 
   P.exampleTitle {
    border: 1px solid black; /* Frame parameters */
    border-bottom: none; /* Remove bottom line */
    padding: 3px; /* Fields around the text */
    display: inline; /* Image as built-in element */
    background: #efecdf; /* Background color */
    font-weight: bold; /* Bold font */
    font-size: 90%; /* Font size */
    margin: 0px; /* Remove indents */
    white-space: nowrap; /* No hyphens in the text */
   }
  </style>
 </head>
 <body> 
 
  <p class="exampleTitle">Example</p>
  <p class="example">
   &lt;html&gt;
   &lt;body&gt;
   &lt;b&gt;Great Fermat's theorem&lt;/b&gt;&lt;br&gt;
   &lt;i&gt;X &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;
   + Y &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt; =
   Z &lt;sup&gt;&lt;small&gt;n&lt;/small&gt;&lt;/sup&gt;&lt;/i&gt;&lt;br&gt;
   where n - integer number &gt; 2
   lt;/body&gt;
   &lt;/html&gt;
  </p>
 
 </body>
</html>

The result of this example is shown on the figure 1


Object model

[window.]document.getElementById("elementID").style.whiteSpace

Remark
Browser Internet Explorer 6 and earlier doesn't support the argument "pre". Internet Explorer 7 understands the value "pre" only in В«strictВ» mode ().
Browsers Opera 9 and Firefox 3 С‚also work with the value "pre-wrap" saving all spacings and hyphens. But if the text cannot be placed to the specified area the text will be carried automatically to the next line.
What is VPS?
Tape Backup
Private Cloud
IT disaster recovery