为什么字母间距在最后一个字符后添加一个空格？

Question

CSS spec for letter spacing 描述 CSS letter-spacing 属性的效果如下：

此属性指定文本字符之间的间距行为。

我想知道为什么在最后一个字符之后添加一个空格，因为这不是两个字符之间的空格。

您可以在下图中看到这种情况，我增加了字母间距。您可以看到在 t 之后添加了额外的空格。此屏幕截图是在 Chrome 上拍摄的，尽管在 Firefox 中也发生了同样的事情。

在为居中文本的字母间距设置动画时，我发现这种行为特别不受欢迎。对于 3 个字符，我希望中间字符保持在同一位置，但事实并非如此。

div {
width: 150px;
text-align:center;
border: 1px solid teal;
padding: 5px;
}

span{
transition: letter-spacing 0.2s;
}

span:hover {

letter-spacing: 10px;
}

<p>Hover over the word HOT to see the letter-spacing change.</p>

<div>
  <span>HOT</span>
</div>

<p>For any word with an even number of letters, the letter after the middle space stays in the same position.</p>

<div>
  <span>SHOT</span>
</div>

什么规范中的什么措辞解释了这种行为？因为这似乎与我阅读时链接到的规范不一致。

编辑：

这与其他有关如何删除多余空间的问题不重复。这是关于该空间是否按照规范正确。了解规范如何映射到我们在浏览器中看到的行为以推理和预测事物是很重要的，因此我们可以在一定程度上确信我们正在测试的浏览器显示的行为将是和其他浏览器一样。了解什么是错误和什么不是错误也很重要，这样我们才能知道我们可以依赖和不能依赖什么，从而能够构建面向未来的解决方案。

Answer 1

letter-spacing 不添加空格，它增加了文档中设置的方向远端的字母使用的空间：test https://jsfiddle.net/Lc6a2pzn 没有什么可删除的，它是字母布局的一部分

一个技巧对于单个单词/行 without punctuation，可能是 direction + text-indent : https://jsfiddle.net/Lc6a2pzn/1/

b {
  letter-spacing: 1em;
  border: solid;
  display:inline-block;
}

b~b {
  text-indent:-1em;;
  direction:rtl;
}

<b>test</b>
<b>test</b>