The word-spacing
CSS property sets the length of space between words and between tags.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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 3The 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 1The definition of 'word-spacing' in that specification. | Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
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
See also
word-spacing by Mozilla Contributors is licensed under CC-BY-SA 2.5.