CSS | word-spacing Property

Difficulty Level : Easy
Last Updated : 09 Aug, 2019

It is a CSS property to increases or decreases the white space between words. This property can have only two values, they are normal and length.
Syntax:

word-spacing: normal|length|initial|inherit;

Property values:

Normal: It defines normal space between words which is 0.25em. This is default value.
Example:

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
      CSS | word-spacing Property 
    </title> 
</head> 
<body> 
    <h1>The word-spacing Property</h1> 
  
    <h2>word-spacing: normal:</h2> 
    <p style="  word-spacing: normal; 
                color:green;  
                font-weight:bold; 
                font-size:25px;"> 
        This is some text. This is some text. 
    </p> 
</body> 
  
</html> 

Output:

Length: It defines an additional space between words (in px, pt, cm, em, etc). Negative values are also allowed.
Example:

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
      CSS | word-spacing Property 
    </title> 
</head> 
<body> 
    <h1>The word-spacing Property</h1> 
  
    <h2>word-spacing: length is 20px</h2> 
    <p style="  word-spacing:20px; 
                color:green;  
                font-weight:bold; 
                font-size:25px;"> 
        GeeksforGeeks - A Computer Science Portal For Geeks! 
    </p> 
</body> 
  
</html> 

Output:

Example: Length to Negative Value

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
      CSS | word-spacing Property 
    </title> 
</head> 
<body> 
    <h1>The word-spacing Property</h1> 
  
    <h2>word-spacing: length is -20px</h2> 
    <p style="word-spacing:-20px; 
              color:green; 
              font-weight:bold; 
              font-size:25px;"> 
        GeeksforGeeks - A Computer Science Portal For Geeks! 
    </p> 
</body> 
  
</html> 

Output:

Supported browsers: The browsers supported by word-spacing Property are listed below:

Google Chrome 1.0
Internet Explorer 6.0
Firefox 1.0
Opera 3.5
Safari 1.0

My Personal Notes

Related Articles