word-spacing 词间距

基本语法

word-spacing: 间距值;

常用单位

1. px - 像素

word-spacing: 30px;

2. em - 字符单位

word-spacing: 2em;  /* 2个字符宽度 */

3. normal - 默认值

word-spacing: normal;  /* 浏览器默认,通常是0 */

4. 负值 - 缩小间距

word-spacing: -5px;  /* 缩小词间距 */

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>word-spacing 词间距</title>
  <style>
    .spacing {
      /* 可以设置为 normal */
      word-spacing: 30px;
    }
  </style>
</head>
<body>
  <!-- 对中文无效,只对英文单词间距有效 -->
  <div class="spacing">word spacing text</div>
  <div class="spacing">文字</div>
</body>
</html>

重要说明

word-spacing 只对英文单词之间的间距有效,对中文无效。

实际应用

场景1: 英文标题增加词间距

.english-title {
  word-spacing: 5px;
}

场景2: 文章正文调整词间距

.article {
  word-spacing: 2px;
  letter-spacing: 0.5px;
}

场景3: 特殊效果

.spaced-out {
  word-spacing: 20px;
}

场景4: 紧凑文字

.tight {
  word-spacing: -2px;
}

与 letter-spacing 的区别

属性	作用	适用文字
`word-spacing`	词间距	英文单词
`letter-spacing`	字间距	中英文都有效

/* 词间距 - 只对英文有效 */
.word {
  word-spacing: 10px;
}

/* 字间距 - 中英文都有效 */
.letter {
  letter-spacing: 5px;
}

学习要点

作用: 控制英文单词之间的间距
无效: 对中文无效
单位: px, em, normal, 负值
应用: 英文排版、特殊效果
对比: 与 letter-spacing 不同,后者对中英文都有效

css学习