word-spacing

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!

word-spacing 属性类似于 letter-spacing,但自然地,它的用途控制文本中单词之间的空格量,而不是单个字符。

.element {
  word-spacing: .75em;
}

word-spacing 可以接收三个不同的值

  1. “normal” 关键字,它重置默认间距
  2. 使用任何 CSS 单位的长度值(最常见的是 pxemrem
  3. “inherit” 关键字,它应用父元素的 word-spacing

目前最佳实践是使用 em。 可以调整字体大小,因此使用像素可能会导致单词之间的间距无法随着大小缩放的问题。 rem 通常很棒,但浏览器支持较低,在这种用例中,最好让间距直接与应用它的单词相关,而不是根元素。

需要注意的是,在此上下文中,“word” 实际上指的是一个内联内容片段——这意味着 word-spacing 也会影响 inline-block 元素以及 inline 元素。 在此示例中,通过设置其父容器的 word-spacing 来对几个此类元素进行间距

值得注意的是……

  • word-spacing 属性可以使用 CSS 过渡 进行动画处理。
  • 虽然根据规范允许使用“百分比”值来确定间距,但它可能会产生不可预测的结果——通常根本没有任何效果。
  • 将 white-space 设置为零是 解决内联块元素之间空格问题 的方法之一。

浏览器支持

其他资源