word-spacing

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CSS 属性 word-spacing 设置标签、单词之间的空格长度。

尝试一下

语法

css
word-spacing: normal; /* Keyword value */
word-spacing: 3px; /* <length> values */
word-spacing: 0.3em;

word-spacing: inherit;

Values

normal

正常的单词间距,由当前字体和/或浏览器定义。

<length>

通过指定具体的额外间距来增加字体的单词间距。查看 <length> 了解可用单位。

<percentage>

通过指定受影响字符的宽度的百分比的方式来增加的间距。

示例

HTML

html
<div id="mozdiv1">Lorem ipsum dolor sit amet.</div>
<div id="mozdiv2">Lorem ipsum dolor sit amet.</div>

CSS

css
#mozdiv1 {
  word-spacing: 15px;
}

#mozdiv2 {
  word-spacing: 5em;
}

无障碍考虑

过大的正或负的 word-spacing 将使应用样式的句子不可读。对于应用了非常大正值样式的文本,单词将相距非常远,甚至不再显示为句子。对于使用非常大负值样式的文本,单词将相互重叠,甚至每个单词的开头和结尾都无法识别。

必须根据具体情况确定合适的 word-spacing 值,因为不同的字体具有不同的字符宽度。没有一个值可以确保所有字体系列都自动保持其易读性。

形式定义

初始值normal
适用元素所有元素. It also applies to ::first-letter and ::first-line.
是否是继承属性
Percentagesrefer to the width of the affected glyph
计算值绝对 <length>
动画类型a length

形式语法

word-spacing = 
normal |
<length>

规范

Specification
CSS Text Module Level 3
# word-spacing-property
Scalable Vector Graphics (SVG) 2
# WordSpacingProperty

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
word-spacing
normal
<percentage> values
DeprecatedNon-standard
On SVG elements

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.

参见