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>
normal | <length-percentage>where
<length-percentage> = <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.
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 Transitions The definition of 'word-spacing' in that specification. | Working Draft | Defines word-spacing as animatable. |
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. |
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 |
Media | visual |
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 |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1 | 6 | 3.5 | 1 |
<percentage> values |
No | ? | 45 | No | No | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | Yes | No | ? | ? | ? |
<percentage> values |
? | ? | ? | 45 | ? | ? | No |
© 2005–2018 Mozilla Developer Network 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