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

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content