Open In App

HTML | DOM Style whiteSpace Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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: 

  • Google Chrome 1 and above
  • Edge 12 and above
  • Firefox 1 and above
  • Internet Explorer 5.5 and above
  • Opera 4 and above
  • Safari 1 and above

 



Last Updated : 05 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads