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

时间:2013-12-19 14:59:32

标签: html css html5 css3

我们假设我们有这个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

3 个答案:

答案 0 :(得分:10)

答案 1 :(得分:5)

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

例如

h2 {
      letter-spacing:10px;
   }

答案 2 :(得分:5)

使用CSS的letter-spacing

h2 {
  letter-spacing: 2em;
}

jsfiddle demo