CSS - word-spacing

The word-spacing CSS property specifies the spacing behavior between tags and words.

Example

HTML

Copy Code

<div id="mozdiv1">Here are many words...</div>
<div id="mozdiv2">...and many more!</div>

CSS

Copy Code

#mozdiv1 {
  word-spacing: 15px;
}

#mozdiv2 {
  word-spacing: 5em;
}

Syntax

CSS

Copy Code

/* 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 space, 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. See <length> value for possible units.
<percentage>: Specifies the additional spacing as a percentage of the affected character’s advance width.

Formal syntax

CSS

Copy Code

normal <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a href="css/word-spacing#length-percentage"><length-percentage></a><p>where <br><code><length-percentage> = <a title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0" href="css/length"><length></a> <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> <a title="" href="css/percentage"><percentage></a></code></p>

Description

The word-spacing CSS property specifies the spacing behavior between tags and words.

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`
Animatable	yes, as a length
Canonical order	the unique non-ambiguous order defined by the formal grammar

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.0	1.0 (1.7 or earlier)	6.0	3.5	1.0 (85)
Percentages	No support	45.0 (45.0)	No support	No support	?

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	No support	?	?	?
Percentages	?	45.0 (45.0)	?	?	?

Specifications

Specification	Status	Comment
CSS Text Level 3 The definition of 'word-spacing' in that specification.	Working Draft	Replace the previous values with a `<spacing-limit>` value that defines the same value, plus the `<percentage>` value and 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

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/word-spacing

CSS CSS Property CSS Text NeedsMobileBrowserCompatibility Reference