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

You are here: Reference > JavaScript > client-side > style handling > properties > whiteSpace

whiteSpace style property

Browser support:

Specifies or returns 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.

Syntax:

object.whiteSpace;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: white-space

Possible values:

The type of this property is string.

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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the whiteSpace property in JavaScript:

<head>
    <style>
        #myDiv {
            width:120px;
            border:1px solid #FF0000;
            white-space:normal;
        }
    </style>
    <script type="text/javascript">
        function ChangeWhiteSpace (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var spaceValue = selectTag.options[whichSelected].text;

            var div = document.getElementById ("myDiv");
            div.style.whiteSpace = spaceValue;
        }
    </script>
</head>
<body>
    <div id="myDiv">
        Lorem ipsum sit dicunt verterem dissentiet eu. Cu vero suscipiantur deterruisset mea, nostro nonummy reprimique sea id.<br />
        Id pri fabellas quaestio delicatissimi, eum at dictas patrioque constituam, ius ut elit legimus eloquentiam.<br />
        Ut mei omnium oblique, est vero cibo nonummy te.
    </div>

    <br />
    <select size="3" onchange="ChangeWhiteSpace (this);">
        <option selected="selected" />normal
        <option />nowrap
        <option />pre
    </select>
</body>