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

Bea*_*rtz 4 html css html5 css3

我们假设我们有这个html:

<h2>TITLE</h2>
Run Code Online (Sandbox Code Playgroud)

是否有可能通过CSS的强大功能使其成为或表现如下:

<h2>T I T L E</h2>
Run Code Online (Sandbox Code Playgroud)

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

我已经设法通过CSS使用这些规则来证明单个字母:

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

h2:after {
  content: "";
  display: inline-block;
  width: 100%;
}
Run Code Online (Sandbox Code Playgroud)

我已经调查过了text-replace,但是在任何一个主流浏览器中都没有支持.除此之外,我还没有找到任何有希望的候选人.

如果有正确的支持,CSS3就可以了,JS没有任何帮助.

UPDATE

letter-spacing不是一个选项,因为它必须动态调整宽度,我不想永远检查浏览器的字距调整实现.但是多亏了那些家伙的建议,我知道在制定问题时我已经忘记了一些东西:)

这是摆弄的小提琴

The*_*Rat 5

更简单的方法是使用字母间距css样式.

例如

h2 {
      letter-spacing:10px;
   }
Run Code Online (Sandbox Code Playgroud)