Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style whiteSpace Property

  • Last Updated : 29 May, 2021

The Style whiteSpace property in HTML DOM is used to set the whitespace for text content. It returns the whitespace property that is given to the text.

Syntax: 

  • It returns the whiteSpace property. 
object.style.whiteSpace
  • It is used to set the whiteSpace property. 
object.style.whiteSpace = "normal|nowrap|pre|initial|inherit"

Property Values:  

  • normal: It is used to collapse the whitespace into single whitespace and wrap the text. It is a default value.
  • nowrap: It is used to collapse the whitespace into single whitespace and there is no text wrapping.
  • pre: It is used to define the pre-formatted text.
  • pre-line: It is used to collapse whitespaces to single whitespace and wrap text on line brakes.
  • pre-wrap: It is used to preserve whitespaces and wrap text on line brakes.
  • initial: It sets the whiteSpace property to its default value.
  • inherit: This property is inherited from its parent element.

Return Value: It returns a string representing the whiteSpace property for an element.

Example 1:  



HTML




<!DOCTYPE html>
<html>
    <head>
        <title>
            DOM Style whiteSpace Property
        </title>
    </head>
     
    <body>
        <center>
            <h1 style = "color:green;">
                GeeksForGeeks
            </h1>
             
            <h2>
                DOM Style whiteSpace Property
            </h2>
                 
            <p id = "gfg">
                A Computer science portal for geeks
                A Computer science portal for geeks
            </p>
  
             
            <button type = "button" onclick = "geeks()">
                Change
            </button>
             
            <script>
                function geeks() {
                    document.getElementById("gfg").style.whiteSpace
                                = "pre-line";
                }
            </script>
        </center>
    </body>
</html>                                   

Output: 
Before Click on the button: 

After Click on the button: 

Example 2: 

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>
            DOM Style whiteSpace Property
        </title>
    </head>
     
    <body>
        <center>
            <h1 style = "color:green;">
                GeeksForGeeks
            </h1>
             
            <h2>
                DOM Style whiteSpace Property
            </h2>
                 
            <p id = "gfg">A Computer science portal for geeks
                A Computer science portal for geeks
            </p>
  
             
            <button type = "button" onclick = "geeks()">
                Change
            </button>
             
            <script>
                function geeks() {
                    document.getElementById("gfg").style.whiteSpace
                                = "pre-wrap";
                }
            </script>
        </center>
    </body>
</html>                                

Output: 
Before Click on the button: 

After Click on the button: 

Supported Browsers: The browser supported by DOM Style whiteSpace property are listed below: 

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

 

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :