word-spacing

Overview

The word-spacing property adjusts the spacing between words in a text element, providing control over the appearance of inline or inline-block text within a containing element. It's related to letter-spacing, but it manages the space between words rather than individual characters. Moreover, it applies to all elements, including the ::first-letter and ::first-line pseudo-elements, and can be combined with CSS transitions for animations between different word-spacing values.

Examples and Usage

Let's explore an example of the word-spacing property in action. We'll create a series of paragraphs with different word-spacing values to demonstrate how the property affects the appearance of the text.

<p class="normal-spacing">This paragraph has normal word spacing.</p>

<p class="pixel-spacing">This paragraph has word spacing set to 10px.</p>

<p class="rem-spacing">This paragraph has word spacing set to 1.5rem.</p>

.normal-spacing {
  word-spacing: normal;
}

.pixel-spacing {
  word-spacing: 10px;
}

.rem-spacing {
  word-spacing: 1.5rem;
}

In the example above, the .normal-spacing paragraph uses the default normal value, resulting in standard spacing between words as defined by the font and browser. Then, the .pixel-spacing paragraph has a word-spacing of 10px, and the .rem-spacing paragraph uses a 1.5rem word-spacing value, causing the words to be spaced further apart. The property also accepts negative values, enabling closer word spacing if necessary.

Syntax and Values

The word-spacing property accepts the following values:

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

Associated Properties

• letter-spacing
• white-space
• text-align
• text-indent

Tips and Tricks

• Setting word-spacing to zero is one way to eliminate the space between inline-block elements.

• Be cautious when using large positive or negative word-spacing values, as they can make the text unreadable. Legible word spacing must be determined on a case-by-case basis, considering the specific font family used.

• While percentage values are allowed, they can yield unpredictable results and are generally not recommended.

• It's a good practice to use relative units like em or rem as they automatically adjust based on the font size, making your design more responsive.

• When animating word spacing with CSS transitions, use ease-in-out timing functions for smooth and natural-looking animations.

Browser Compatibility

Caution: Support data for Internet Explorer is no longer updated by MDN browser-compact-data and may be incorrect. (refers to the link below on specific browser compatibility)

Useful Resources

Can I use... word-spacing

CSS Text Module Level 3 - W3C

W3C CSS Transitions Specification