HTML - DOM Style Object wordBreak Property

Quiz

HTML DOM Style Object wordBreak property specifies how words should break when it reaches at end of the line except for CJK(Chinese, Japanese and Korean) scripts.

Syntax

Set the wordBreak property:

object.style.wordBreak= "normal | break-all | keep-all | initial | inherit";

Get the wordBreak property:

object.style.wordBreak;

Property Values

Value	Description
normal	It is the default value which Uses the default line break rule.
break-all	It breaks words at any character to prevent overflow.
keep-all	It is similar to normal except for Chinese/Japanese/Korean (CJK) text.
break-word	It breaks the words at random point to prevent overflow.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents word break property of an element.

Example of HTML DOM Style Object 'wordBreak' Property

The following example sets the wordBreak value for a div element, which breaks the words at the end of the line according to property values specified.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object wordBreak Property
    </title>
    <style>
        #break {
            background-color: #04af2f;
            color: rgb(83, 76, 76);
            border: 1px solid black;
            width: 100px;
        }
    </style>
</head>
<body>
    <p>
        Click to set wordBreak property.
    </p>    
    <button onclick="funTwo()">Break All</button>
    <button onclick="funThree()">Keep All</button>
    <button onclick="funFour()">Break Word</button>
    <button onclick="fun()">Normal</button>
    <br><br>
    <div id="break">
        JavaScriptConsiderThisAsOneWordForThisExample
        is a lightweight, interpreted programming 
        language 
        . 
    </div>
    <script>
        function funTwo() {
            document.getElementById("break")
                .style.wordBreak= "break-all";
        }
        function funThree() {
            document.getElementById("break")
                .style.wordBreak = "Keep-all";
        }
        function funFour() {
            document.getElementById("break")
                .style.wordBreak = "break-word";
        }
        function fun() {
            document.getElementById("break")
                .style.wordBreak= "normal";
        }
    </script>
</body>
</html>

Supported Browsers

Property
wordBreak	Yes 1	Yes 12	Yes 15	Yes 3	Yes 15

html_dom.htm

Print Page