The word-spacing
CSS property sets the length of space between words and between tags.
Syntax
/* 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;
Values
normal
- The normal inter-word spacing, as defined by the current font and/or the browser.
<length>
- Specifies extra spacing in addition to the intrinsic inter-word spacing defined by the font.
<percentage>
- Specifies extra spacing as a percentage of the affected characterβs advance width.
Examples
HTML
<div id="mozdiv1">Here are many words...</div> <div id="mozdiv2">...and many more!</div>
CSS
#mozdiv1 { word-spacing: 15px; } #mozdiv2 { word-spacing: 5em; }
Accessibility concerns
A large positive or negative word-spacing
value will make the sentences the styling is applied to unreadable. For text styled with a very large positive value, the words will be so far apart that it will no longer appear to be a sentence. For text styled with a large negative value, the words will overlap each other to the point where the the beginning and end of each word is unrecognizable.
Legible word-spacing
must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.
- MDN Understanding WCAG, Guideline 1.4 explanations
- Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0
Formal definition
Initial value | normal |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Percentages | refer to the width of the affected glyph |
Computed value | an optimum, minimum, and maximum value, each consisting of either an absolute length, a percentage, or the keyword normal |
Animation type | a length |
Formal syntax
normal | <length-percentage>where
<length-percentage> = <length> | <percentage>
Specifications
Specification | Status | Comment |
---|---|---|
CSS Text Module Level 3 The definition of 'word-spacing' in that specification. |
Working Draft | Replaces the previous values with a <spacing-limit> value that defines the same thing, plus the <percentage> value. Allows up to three values describing the optimum, minimum, and maximum value. |
CSS Level 2 (Revision 1) The definition of 'word-spacing' in that specification. |
Recommendation | No change. |
CSS Level 1 The definition of 'word-spacing' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
word-spacing | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 6 | Opera Full support 3.5 | Safari Full support 1 | WebView Android Full support 37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 14 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
<percentage> values | Chrome No support No | Edge No support No | Firefox Full support 45 | IE No support No | Opera No support No | Safari Full support 6.1 | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 45 | Opera Android No support No | Safari iOS Full support 6.1 | Samsung Internet Android No support No |
SVG support | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 72 | IE Full support 9 | Opera Full support 7 | Safari Full support 5.1 | WebView Android Full support β€37 | Chrome Android Full support 18 | Firefox Android No support No | Opera Android Full support 14 | Safari iOS Full support 5.1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- No support
- No support