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:

<!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:

<!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:

<!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:

<!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> 