CSS word-spacing Property

Description

The word-spacing property sets the spacing between words. If the text is set to align through text-align with the value justify (justification in width), then the spacing between words will be set forcefully, but not less than the value specified through word-spacing.

Initial value

normal

Applies to

All elements

Inherited

Yes

Media

Visual

Computed value

An absolute length

Animatable

No

CSS Version

CSS1, CSS2, CSS3

JavaScript syntax

object.style.wordSpacing

Syntax

word-spacing: [ normal | <length> | <percentage>] 

Values

• normalNo additional spacing is applied.
• <length>Specifies extra spacing in addition to the intrinsic inter-word spacing defined by the font. Values may be negative, but there may be implementation-dependent limits.
• <percentage>Specifies the additional spacing as a percentage of the affected character's advance measure.
• inherit

Example

<p class="test">Eat more of these soft French rolls and drink some tea.  Eat these soft French rolls and drink some tea.  Eat these soft French rolls and drink some tea.  Eat these soft French rolls and drink some tea.</p> 

<p class="test2">Eat more of these soft French rolls and drink some tea.  Eat these soft French rolls and drink some tea.  Eat these soft French rolls and drink some tea.  Eat these soft French rolls and drink some tea.</p> 

<p class="test3">Eat these soft French rolls and drink some tea.  Eat these soft French rolls and drink some tea.  Eat these soft French rolls and drink some tea.  Eat these soft French rolls and drink some tea.</p> 

.test {
   word-spacing: normal; 
}
.test2 {
   word-spacing: 15px;
}
.test3 {
   word-spacing: -5px; 
}

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop
6	12	1	1	3.5	1
Tablets / Mobile
37	18	4	X	1	X

Last updated by CSSPortal on: 1st November 2019