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

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

wordBreak style property

Browser support:

Specifies or returns the line breaking rule within words.

Syntax:

object.wordBreak;

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

This property is read/write.

CSS page for this property: word-break

Possible values:

The type of this property is string.

One of the following values:

break-all

Line breaking within Asian character set content is allowed, non-Asian text may be arbitrarily broken across lines.

keep-all

Word breaking for Chinese, Japanese, and Korean text is not allowed.

normal

Default. Word breaking is allowed.

Default: normal.

Example HTML code 1:

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

<head>
    <style>
        .example {
            background-color: #F9F9F9;
            word-break: break-all;
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="example">
        word1 word2 word3 word4 word5 word6 word7 word8 word9 word10 
    </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 wordBreak property in JavaScript:

<head>
    <style>
        #myDiv {
            background-color: #F9F9F9;
            word-break: break-all;
            width: 300px;
            height: 200px;
        }
    </style>

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

            if ('wordBreak' in div.style) {
                div.style.wordBreak = breakType;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv">
        word1 word2 word3 word4 word5 word6 word7 word8 word9 word10 
    </div>
    <br />
    <button onclick="ChangeBreak ('break-all');">break-all</button>
    <button onclick="ChangeBreak ('normal');">normal</button>
    <button onclick="ChangeBreak ('keep-all');">keep-all</button>
</body>