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

CSS spec for letter spacing描述了CSS letter-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，以确保我们正在测试的浏览器显示的行为将是行为。与其他浏览器相同。了解什么是错误以及什么不是错误也很重要，这样我们才能知道我们可以依靠和不能依靠的东西，从而能够构建可以证明 future 的解决方案。

最佳答案

一个单词/行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>

关于css - 为什么字母间距在最后一个字符之后添加空格？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58313099/