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>
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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content