Skip to content
Related Articles

Related Articles

HTML | DOM Style wordSpacing Property
  • Last Updated : 02 Aug, 2019

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.
  • intial: 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:




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




<!DOCTYPE html>
<html>
  
<head>
    <title>DOM Style wordSpacing Property </title>
    <style>
  
    </style>
  
</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
    • Internet Explorer
    • Firefox
    • Opera
    • Apple Safari
    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :