css - 为什么 letter-spacing 在最后一个字符后加一个空格？

Question

CSS spec for letter spacing CSS letter-spacing 属性的作用描述如下:

This property specifies spacing behavior between text characters.

因此我想知道为什么在最后一个字符之后添加一个空格，因为它不是 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 的解决方案。

Answer 1

letter-spacing doesn't add a space, it increases the space used by the letter on the far side of the direction set in the document: test https://jsfiddle.net/Lc6a2pzn there is nothing to remove, it is part of the letter layout

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