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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

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

尝试一下

word-spacing: normal;

word-spacing: 1rem;

word-spacing: 4px;

word-spacing: -0.4ch;

<section id="default-example">
  <p id="example-element">
    As much mud in the streets as if the waters had but newly retired from the
    face of the earth, and it would not be wonderful to meet a Megalosaurus,
    forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

@font-face {
  src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
  font-family: Amstelvar;
  font-style: normal;
}

section {
  font-size: 1.2em;
  font-family: Amstelvar;
}

语法

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`.
是否是继承属性	是
Percentages	refer 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

浏览器兼容性

参见

letter-spacing