You are here: Reference > CSS > properties > white-space

white-space property

Browser support:
Specifies how spaces, tabs, and newline characters inside the element are handled.
With this property you can manipulate the default line breaking rules. To add extra line breaks, use the br element.
JavaScript page for this property: whiteSpace. You can find other example(s) there.

Possible values:

 One of the following values: 
-moz-pre-wrap
Prevents user agents from collapsing sequences of whitespace.
inherit
Takes the value of this property from the computed style of the parent element.
normal
Default. Collapses sequences of whitespace, and breaks lines automatically.
nowrap
Collapses sequences of whitespace, but prevents lines from wrapping.
pre
Preserves all line breaks and whitespaces.
pre-line
Directs user agents to collapse sequences of whitespace.
pre-wrap
Prevents user agents from collapsing sequences of whitespace.
Default: normal.

Example HTML code 1:

This example illustrates the use of the white-space property:
<head>
    <style>
        .example {
            width: 200px;
            overflow: auto;
            border: 1px solid #FF0000;
            margin: 10px;
        }

        .normal {
            white-space: normal;
        }
        .nowrap {
            white-space: nowrap;
        }
        .pre {
            white-space: pre;
        }

    </style>
</head>
<body>
    <div class="example normal">
        The white-space     property is set to normal.<br />
        The white-space     property is set to normal.<br />
        The white-space     property is set to normal.<br />
        The white-space     property is set to normal.
    </div>
    <div class="example nowrap">
        The white-space     property is set to nowrap.<br />
        The white-space     property is set to nowrap.<br />
        The white-space     property is set to nowrap.<br />
        The white-space     property is set to nowrap.
    </div>
    <div class="example pre">
        The white-space     property is set to pre.<br />
        The white-space     property is set to pre.<br />
        The white-space     property is set to pre.<br />
        The white-space     property is set to pre.
    </div>
</body>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content