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

You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > webkitNbspMode

webkitNbspMode style property

Browser support:

Specifies or retrieves the behavior of non-breaking spaces within an element.

The browser's line breaking mechanism does not break lines at the 'nbsp' character as opposed to normal space characters. With this property you can change the behavior of 'nbsp' characters to work as normal spaces.

Syntax:

object.webkitNbspMode;

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

This property is read/write.

CSS page for this property: -webkit-nbsp-mode

Possible values:

The type of this property is string.

One of the following values:

inherit

Takes the value of this property from the computed style of the parent element.

normal

Default. Text should not be broken at non-breaking spaces.

space

The 'nbsp' characters work like normal spaces. Text can be broken at non-breaking spaces.

Default: normal.

Example HTML code 1:

This example illustrates the use of the -webkit-nbsp-mode property:

<head>
    <style>
        .example {
            width: 120px;
            height: 120px;
            overflow: auto;
            border: 1px solid #acacac;
        }
        .normal { 
            -webkit-nbsp-mode: normal;
        } 
        .space { 
            -webkit-nbsp-mode: space;
        } 
    </style>
</head>
<body>
    <div class="example normal">
        Text&nbsp;should&nbsp;not&nbsp;be&nbsp;broken&nbsp;at&nbsp;non-breaking&nbsp;spaces.
    </div>
    <div class="example space">
        Text&nbsp;can&nbsp;be&nbsp;broken&nbsp;at&nbsp;non-breaking&nbsp;spaces.
    </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 webkitNbspMode property in JavaScript:

<head>
    <style>
        #myDiv {
            width: 120px;
            height: 120px;
            overflow: hidden;
            border: 1px solid #acacac;
            -webkit-nbsp-mode: space;
        }
    </style>
    <script type="text/javascript">
        function ChangeNbsp (select) {
            var newValue = select.options[select.selectedIndex].text;
            var div = document.getElementById ("myDiv");

            if ('webkitNbspMode' in div.style) {
                div.style.webkitNbspMode = newValue;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv">
        Some&nbsp;content&nbsp;within&nbsp;this&nbsp;division&nbsp;element&nbsp;
    </div>
    <select size="2" onchange="ChangeNbsp (this);">
        <option />normal
        <option />space
    </select>
</body>