CSS word-spacing

The word-spacing property adjusts the distance between words. You can either increase or decrease the white space between the words of any element using this property.

CSS

word-spacing: value;

Values

normal : This is the default value and sets the normal spacing of 0.25em (with no extra spacing).

<length> : It is the amount of extra space (in px, em, etc), in addition to the normal spacing. A positive value adds additional space while a negative value reduces space between words.

initial : Sets the property to the default value.

inherit : Inherits the value from parent element.

Example

Following is an example of word spacing.

HTML

<p id="wspacing">This text has default word spacing</p>
<p id="wspacing1">This text has extra word spacing</p>
<p id="wspacing2">This text has reduced word spacing</p>

CSS

#wspacing {
  word-spacing: normal;
}

#wspacing1 {
  word-spacing: 4px;
}

#wspacing2 {
  word-spacing: -4px;
}

See the Pen Word Spacing by Aakhya Singh (@aakhya) on CodePen.

Browser Support

This property is supported by all browsers.