HTML | DOM Style wordWrap Property

Last Updated : 20 Oct, 2021

The Style wordWrap property in HTML DOM is used to set or return whether long words should be broken to wrap around to the next line. Syntax:

To get the wordWrap property
```
object.style.wordWrap
```

To set the wordWrap property

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

Property Values:

normal: This is used to break long words only at the break points.

Return Values: It returns a string value, which representing the word-wrap property of an element

Example-1:

html

<!DOCTYPE html>
<html>

<head>
    <title>
      DOM Style wordWrap Property
    </title>
    <style>
        .content {
            border: 1px solid;
            height: 200px;
            width: 200px;
            word-wrap: break-word;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style wordWrap Property
    </b>
    <p>
      The wordWrap property specifies whether
      long words should be broken to wrap 
      around to the next line.
    </p>
  
    <div class="content">
        GeeksforGeeksisacomputerscienceportal.
    </div>
    <button onclick="setWordWrap()">
      Change wordWrap
    </button>

    <!-- Script to set wordWrap to normal -->
    <script>
        function setWordWrap() {
            elem = document.querySelector('.content');
            elem.style.wordWrap = 'normal';
        }
    </script>
</body>

</html>

Output:

Before clicking the button:
After clicking the button:

break-word: This is used to allow unbreakable words to be broken to the next line. Example-2:

html

<!DOCTYPE html>
<html>

<head>
    <title>
      DOM Style wordWrap Property
    </title>
    <style>
        .content {
            border: 1px solid;
            height: 200px;
            width: 200px;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style wordWrap Property
    </b>
    <p>
        The wordWrap property specifies
      whether long words should be broken
      to wrap around to the next line.
    </p>
    <div class="content">
        GeeksforGeeksisacomputerscienceportal.
    </div>
    <button onclick="setWordWrap()">
      Change wordWrap
    </button>

    <!-- Script to set wordWrap to break-word -->
    <script>
        function setWordWrap() {
          
            elem = document.querySelector('.content');
            elem.style.wordWrap = 'break-word';
        }
    </script>
</body>

</html>

Output:

Before clicking the button:
After clicking the button:

initial: This is used to set the property to its default value. Example-3:

html highligt=38-39

<!DOCTYPE html>
<html>

<head>
    <title>
      DOM Style wordWrap Property
    </title>
    <style>
        .content {
            border: 1px solid;
            height: 200px;
            width: 200px;
            word-wrap: break-word;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>DOM Style wordWrap Property</b>
    <p>
        The wordWrap property specifies 
      whether long words should be broken
      to wrap around to the next line.
    </p>
    <div class="content">
      GeeksforGeeksisacomputerscienceportal.
    </div>
    <button onclick="setWordWrap()">
      Change wordWrap
    </button>

    <!-- Script to set wordWrap to initial -->
    <script>
        function setWordWrap() {
          elem = document.querySelector('.content');
          elem.style.wordWrap = 'initial';
        }
    </script>
</body>

</html>

Output:

Before clicking the button:
After clicking the button:

inherit: This is used to inherit the value from the parent of the element. Example-4:

html

<!DOCTYPE html>
<html>

<head>
    <title>
      DOM Style wordWrap Property
    </title>
    <style>
        #parent {
            word-wrap: break-word;
        }
        
        .content {
            border: 1px solid;
            height: 200px;
            width: 200px;
            word-wrap: normal;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style wordWrap Property
    </b>
    <p>
        The wordWrap property specifies whether 
      long words should be broken to wrap around
      to the next line.
    </p>
    <div id="parent">
        <div class="content">
            GeeksforGeeksisacomputerscienceportal.
        </div>
    </div>
    <button onclick="setWordWrap()">
      Change wordWrap
    </button>

    <!-- Script to set wordWrap to inherit -->
    <script>
        function setWordWrap() {
          
            elem = document.querySelector('.content');
            elem.style.wordWrap = 'inherit';
        }
    </script>
</body>

</html>