Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

HTML | DOM Style wordSpacing Property

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

The Style wordSpacing property in HTML DOM used to set the spacing between words. It can also be used to specify space between words. It returns the spacing between the words in a text.

Syntax: 

  • It returns the wordSpacing property. 
object.style.wordSpacing 
  • It is used to set the wordSpacing property. 
object.style.wordSpacing  =  "normal|length|initial|inherit"

Property Values:  

  • normal: This is used to specify normal spacing between words.It is a default value.
  • length: This is used to specify space between the words in length units.It can allow negative values.
  • initial: It sets the wordSpacing property to its default value.
  • inherit: This property is inherited from its parent element.

Return Value: It returns a string representing the space between the words in a text. 

Example 1: 

HTML




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

Output: 

  • Before clicking on the button: 

  • After clicking on the button: 

Example 2:  

HTML




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

Output: 

  • Before clicking on the button: 

  • After clicking on the button: 

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

  • Google Chrome 1
  • Edge 12
  • Internet Explorer 6
  • Firefox 1
  • Opera 3.5
  • Apple Safari 1

My Personal Notes arrow_drop_up
Last Updated : 05 Aug, 2022
Like Article
Save Article
Similar Reads
Related Tutorials