html - 在 CSS 中的每个字符后插入一个空格

Question

假设我们有这个 html:

<h2>TITLE</h2>

是否有可能，仅通过 CSS 的力量，使其成为或表现如下:

<h2>T I T L E</h2>

原因是我想证明标题中给定宽度的字母是合理的，并且我不想在正确评估 CSS 选项之前求助于服务器端正则表达式巫术。

我已经使用这些规则通过 CSS 证明了单个字母的合理性:

h2 {
  text-align: justify;
  width: 200px; // for example
}

h2:after {
  content: "";
  display: inline-block;
  width: 100%;
}

我研究过 text-replace，但在任何主流浏览器中都不支持。除此之外，我还没有找到任何有希望的候选人。

如果有好的支持，CSS3 就可以，JS 没有任何帮助。

更新

letter-spacing 不是一个选项，因为它必须动态调整宽度并且我不想永久检查浏览器的字距调整实现。但是感谢那些建议的人，我知道我在提出问题时忘记了一些东西:)

Here's a jsfiddle for fiddling

Answer 1

为什么不直接使用字母间距？

https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing