In order to access this site you need to enable JavaScript!

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>