CSS word-spacing Property

The CSS word-spacing property is used to specify the spacing behavior between individual tags and words. The value specified will be added to the default space between these words. Don’t be confused by the term “word” in the word-spacing property. It can be used on any kind of inline or inline-block content.

The initial value of CSS word-spacing property is normal. You can apply it to all elements. It also applies to ::first-letter and ::first-line. This property can be inherited which means all elements that are children of a given element will also have the same value for word-spacing property as the parent element. The final computed value of this property consists of an optimum, minimum, and maximum value, each consisting of either an absolute length, a percentage, or the keyword normal. This property is animatable as a length.

Syntax

This is the formal syntax for using word-spacing property.

word-spacing: normal | <length> | inherit

Here are some examples of using this property.

/* Keyword value */
word-spacing: normal;

/* <length> values */
word-spacing: 3px;
word-spacing: 0.3em;

/* <percentage> values */
word-spacing: 50%;
word-spacing: 200%;

/* Global values */
word-spacing: inherit;
word-spacing: initial;
word-spacing: unset;

Acceptable Values

normal

This value indicates that the space between the words should be equal to the normal inter-word space, as defined by the current font and/or the browser.

<length>

This value is used to specify extra inter-word space in addition to the default space between words. Negative values are acceptable but there may be implementation-specific limits.

Working Examples

See the Pen CSS word-spacing Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The CSS word-spacing property is supported in all major browsers like Chrome, Safari, Firefox, IE6+ and Opera, iOS and Android.

Further Reading

  1. Read more about the CSS <word-spacing> property on MDN.
  2. You can also read the CSS <word-spacing> property on CSSWG.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top