文本单词间距 word-spacing

Docs

word-spacing - CSS | MDN (mozilla.org)

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

• normal：正常的单词间距，由当前字体或浏览器定义。
• <length>：通过指定具体的额外间距来增加字体的单词间距。查看 length 了解可用单位。
• <percentage>：通过指定受影响字符的宽度的百分比的方式来增加的间距。

HTML

<p class="wordspacing">
  <span class="keyword">word-spacing: normal; </span>
  Health provides empowering, encouraging, and educational content, advice, and inspiration.
</p>
<p class="wordspacing1">
  <span class="keyword">word-spacing: 1em; </span>
  Health provides empowering, encouraging, and educational content, advice, and inspiration.
</p>
<p class="wordspacing2">
  <span class="keyword">word-spacing: 5px; </span>
  Health provides empowering, encouraging, and educational content, advice, and inspiration.
</p>

CSS

.keyword {
  font-weight: bold;
  background-color: silver;
  color: darkgreen;
  word-spacing: normal;
}

.wordspacing {
  word-spacing: normal;
}

.wordspacing1 {
  word-spacing: 1em;
}

.wordspacing2 {
  word-spacing: 5px;
}

http://localhost:3000/word-spacing.html

word-spacing: normal; Health provides empowering, encouraging, and educational content, advice, and inspiration.

word-spacing: 1em; Health provides empowering, encouraging, and educational content, advice, and inspiration.

word-spacing: 5px; Health provides empowering, encouraging, and educational content, advice, and inspiration.