Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style wordWrap Property

  • Difficulty Level : Basic
  • Last Updated : 02 Aug, 2019

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.

    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:
      normal-before
    • After clicking the button:
      normal-after
  • 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:
      break-before
    • After clicking the button:
      break-after
  • 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:

      initial-before

    • After clicking the button:

      initial-after

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

    Output:

    • Before clicking the button:
      inherit-before
    • After clicking the button:
      inherit-after

Supported Browsers: The browser supported by DOM Style wordWrap Property are listed below:

  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :