如何为单行文本中的部分单词设置CSS word-spacing属性？

这个问题很常见——当你想给文本中部分单词精准控制间距时，全局的word-spacing就不太够用了。咱们可以通过「局部包裹+样式覆盖」的方式解决，具体步骤如下：

步骤1：调整HTML结构 #

把需要取消额外间距的两个单词用一个<span>包裹起来，比如：

<div class="photo-date">2018-mai-09 <span class="no-extra-space">10:46 AM</span></div>

步骤2：补充CSS样式 #

在你现有的.photo-date样式基础上，给这个新增的<span>设置word-spacing: 0，覆盖父元素的全局间距：

.photo-date {
  text-align-last: center;
  font-weight: bold;
  font-size: 11px;
  word-spacing: 10px;
  color: #636e72;
  margin-top: 5px;
}

.no-extra-space {
  word-spacing: 0; /* 取消内部单词的额外间距 */
}

原理说明 #

word-spacing是会被子元素继承的，但我们给内部的<span>单独设置了word-spacing: 0，这样：

• 「2018-mai-09」和<span>之间的间距依然是父元素设置的10px
• <span>内部的「10:46」和「AM」之间没有额外间距，正好实现你要的「2018-mai-09 10:46AM」效果

如果之后需要调整全局间距，只修改.photo-date的word-spacing即可，不需要动内部的样式，非常灵活。

内容的提问来源于stack exchange，提问作者user9569059