X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS word-spacing Property

The word-spacing property allows changing the space between the words in a piece of text, not the individual characters.

The word-spacing property is used on inline content.

Initial Value normal
Applies to All elements. It also applies to ::first-letter and ::first-line.
Inherited Yes.
Animatable Yes. Word-spacing is animatable.
Version CSS1
DOM Syntax object.style.wordSpacing = "40px";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text { 
      word-spacing: normal;
      }
    </style>
  </head>
  <body>
    <h2>Word-spacing property example</h2>
    <p class="text">Lorem ipsum is simply dummy text...</p>
  </body>
</html>

In the following example the space between the words is 20px:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text { 
      word-spacing: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Word-spacing property example</h2>
    <p class="text">Lorem ipsum is simply dummy text...</p>
  </body>
</html>

Values

Value Description
normal Specifies normal word spacing. This is the default value of this property.
length Specifies an extra word spacing. Can be specified in px, pt, cm, em, etc. Negative values are valid.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

1.0+ 12.0+ 1.0+ 1.0+ 3.5+


Do you find this helpful?

Related articles