此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in English Always switch to English

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 ⁨2015年7月⁩.

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

语法

css
/* 关键字值 */
word-spacing: normal;

/* <length> 值 */
word-spacing: 3px;
word-spacing: 0.3em;

/* 全局值 */
word-spacing: inherit;
word-spacing: initial;
word-spacing: revert;
word-spacing: revert-layer;
word-spacing: unset;

normal

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

<length>

指定在字体所定义的固有单词间距之外,额外增加的间距。

无障碍

较大的正值或负值的 word-spacing 会使应用该样式的句子变得不可读。如果文本使用了非常大的正值,单词之间的间距会被拉得过远,以至于看起来不像是一句话。如果文本使用了很大的负值,则单词之间会相互重叠,以至于无法辨别各单词的开头和结尾。

易读的 word-spacing 必须根据具体情况逐一确定,因为不同的字体族具有不同的字符宽度。没有一个通用的数值能够保证所有字体族都能自动保持良好的可读性。

示例

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

形式定义

初始值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

浏览器兼容性

参见