The word-spacing
CSS property sets the length of space between words and between tags.
/* 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;
normal
<length>
<percentage>
<div id="mozdiv1">Here are many words...</div> <div id="mozdiv2">...and many more!</div>
#mozdiv1 { word-spacing: 15px; } #mozdiv2 { word-spacing: 5em; }
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.
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 |
normal | <length-percentage>where
<length-percentage> = <length> | <percentage>
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. |
Desktop | ||||||
---|---|---|---|---|---|---|
word-spacing |
1 | 12 | 1 | 6 | 3.5 | 1 |
<percentage> values |
No | No | 45 | No | No | 6.1 |
SVG support | 1 | 12 | 72 | 9 | 7 | 5.1 |
Mobile | ||||||
---|---|---|---|---|---|---|
word-spacing |
37 | 18 | 4 | 14 | 1 | 1.0 |
<percentage> values |
No | No | 45 | No | 6.1 | No |
SVG support | ≤37 | 18 | No | 14 | 5.1 | 1.0 |
© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing