HTML - DOM Style Object wordWrap Property

Quiz

HTML DOM Style Object wordWrap property sets or returns whether long words should be broken to wrap onto next line.

Syntax

Set the wordWrap property:

object.style.wordWrap= "normal | break-word | initial | inherit";

Get the wordWrap property:

object.style.wordWrap;

Property Values

Value	Description
normal	It is the default value which breaks words only at breaking point.
break-word	It allows unbreakable words to be broken into next line.
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 the word wrap property of an element.

Example of HTML DOM Style Object 'wordWrap' Property

The following property illustrates wordWrap property applied on p element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object wordWrap Property
    </title>
    <style>
        #break {
            width: 150px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <p>
        Click to set wordWrap Property
    </p>
    <button onclick="fun()">Word Wrap</button>
    <button onclick="funTwo()">Normal</button>
    <br><br>
    <div id="break">
        ThisIsASingleWordIllustratingWordWrapProperty
        Welcome to Tutorials Point.
    </div>
    <script>
        function fun() {
            document.getElementById("break")
                .style.wordWrap = "break-word";
        }
        function funTwo() {
            document.getElementById("break")
                .style.wordWrap = "normal";
        }
    </script>
</body>
</html>

Supported Browsers

Property
wordWrap	Yes 23	Yes 12	Yes 49	Yes 7	Yes 15

html_dom.htm

Print Page