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.

句法

/* 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

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.

范例

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

可访问性关注

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.

形式定义

初始值 normal
适用于 所有元素。它还适用于 ::first-letter and ::first-line .
继承 yes
百分比 refer to the width of the affected glyph
计算值 an optimum, minimum, and maximum value, each consisting of either an absolute length, a percentage, or the keyword normal
动画类型 a length

形式句法

normal | <length-percentage>

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

规范

规范 状态 注释
CSS Text Module Level 3
The definition of 'word-spacing' in that specification.
工作草案 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.
推荐 无变化。
CSS Level 1
The definition of 'word-spacing' in that specification.
推荐 初始定义。

浏览器兼容性

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. 更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
word-spacing Chrome 完整支持 1 Edge 完整支持 12 Firefox 完整支持 1 IE 完整支持 6 Opera 完整支持 3.5 Safari 完整支持 1 WebView Android 完整支持 37 Chrome Android 完整支持 18 Firefox Android 完整支持 4 Opera Android 完整支持 14 Safari iOS 完整支持 1 Samsung Internet Android 完整支持 1.0
<percentage> Chrome 不支持 No Edge 不支持 No Firefox 完整支持 45 IE 不支持 No Opera 不支持 No Safari 完整支持 6.1 WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 完整支持 45 Opera Android 不支持 No Safari iOS 完整支持 6.1 Samsung Internet Android 不支持 No
SVG support Chrome 完整支持 1 Edge 完整支持 12 Firefox 完整支持 72 IE 完整支持 9 Opera 完整支持 7 Safari 完整支持 5.1 WebView Android 完整支持 ≤37 Chrome Android 完整支持 18 Firefox Android 不支持 No Opera Android 完整支持 14 Safari iOS 完整支持 5.1 Samsung Internet Android 完整支持 1.0

图例

完整支持

完整支持

不支持

不支持

另请参阅

元数据

  • 最后修改: