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

Question

字母间距的CSS 规范描述了 CSSletter-spacing属性的效果如下：

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

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

您可以在下图中看到这种情况，我增加了字母间距。您可以看到在 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>

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

编辑：

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

Answer 1

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

对于没有标点符号的单个单词/行的技巧，可能是 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>