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

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

wordWrap style property

Browser support:

	3.5

Specifies or returns whether the current line should break if the content exceeds the boundaries of its container.

Note: The wordWrap property is supported in Firefox from version 3.5.

Syntax:

object.wordWrap;

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

This property is read/write.

CSS page for this property: word-wrap

Possible values:

The type of this property is string.

One of the following values:

break-word

Content will wrap to the next line, and a word-break will occur when necessary.

inherit

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

normal

Content exceeds the boundaries of the specified rendering box.

Default: normal.

Example HTML code 1:

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

<head>
    <style>
        .example {
            width: 200px;
            height: 150px;
            background: #99C6CD;
        }
    </style>
</head>
<body>
    <div class="example" style="word-wrap: break-word;">
        breakonelongwordintomultiplewordsonmultiplelines.
    </div>

    <br />

    <div class="example" style="word-wrap: normal;">
        breakonelongwordintomultiplewordsonmultiplelines.
    </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 wordWrap property in JavaScript:

<head>
    <style>
        #myDiv {
            word-wrap: normal;
            width: 200px;
            height: 150px;
            background: #99C6CD;
        }
    </style>

    <script type="text/javascript">
        function ChangeWordSpacing (value) {
            var div = document.getElementById ("myDiv");

            if ('wordWrap' in div.style) {
                div.style.wordWrap = value;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv">
        breakonelongwordintomultiplewordsonmultiplelines.
    </div>

    <br />
    <button onclick="ChangeWordSpacing ('break-word');">break-word</button>
    <button onclick="ChangeWordSpacing ('normal');">normal</button>
</body>