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

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

wordSpacing style property

Browser support:

Specifies or returns the spacing between words.

Negative values are permitted.

Syntax:

object.wordSpacing;

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

This property is read/write.

CSS page for this property: word-spacing

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. Normal spacing is used, which is dependent on the font or on the default browser settings.

space in length

The space between words in length units. For the supported length units, see the length page.

Default: normal.

Example HTML code 1:

This example illustrates the use of the word-spacing property:

<head>
    <style>
        .example {
            word-spacing: 10px;
        }
    </style>
</head>
<body>
    <b class="example">word spacing sample text</b>
</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 wordSpacing property in JavaScript:

<head>
    <script type="text/javascript">
        function ChangeWordSpacing (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

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

            var bold = document.getElementById ("myBold");
            bold.style.wordSpacing = spacingValue;
        }
    </script>
</head>
<body>
    <b id="myBold">word spacing sample text</b>

    <br />
    Change the word-spacing property:
    <select size="5" onchange="ChangeWordSpacing (this)">
        <option selected="selected" />0px
        <option />10px
        <option />30px
        <option />50px
        <option />70px
    </select>
</body>