我们假设我们有这个html:
TITLE
是否有可能通过CSS的强大功能使其成为或表现如下:
T I T L E
原因是我想证明标题中给定宽度上的字母是正确的,并且我不想在正确评估CSS选项之前求助于服务器端正则表达式巫术.
我已经设法通过CSS使用这些规则来证明单个字母:
h2 { text-align: justify; width: 200px; // for example } h2:after { content: ""; display: inline-block; width: 100%; }
我已经调查过了text-replace
,但是在任何一个主流浏览器中都没有支持.除此之外,我还没有找到任何有希望的候选人.
如果有正确的支持,CSS3就可以了,JS没有任何帮助.
UPDATE
letter-spacing
不是一个选项,因为它必须动态调整宽度,我不想永远检查浏览器的字距调整实现.但是多亏了那些家伙的建议,我知道在制定问题时我已经忘记了一些东西:)
这是摆弄的小提琴
更简单的方法是使用字母间距css样式.
例如
h2 { letter-spacing:10px; }
使用CSS的字母间距:
h2 { letter-spacing: 2em; }
jsfiddle演示
为什么不使用字母间距?
https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing