MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

Our volunteers haven't translated this article into Bahasa Indonesia yet. Join us and help get the job done!
You can also read the article in English (US).

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

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.

Formal syntax

normal | <length-percentage>

where
<length-percentage> = <length> | <percentage>

Example

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;
} 

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 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 valuenormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Percentagesrefer to the width of the affected glyph
Mediavisual
Computed valuean optimum, minimum, and maximum value, each consisting of either an absolute length, a percentage, or the keyword normal
Animation typea length
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes163.51
<percentage> values No ?45 No No ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? Yes No ? ? ?
<percentage> values ? ? ?45 ? ? ?

Tag Dokumen dan Kontributor

 Terakhir diperbarui oleh: wbamberg,