由于所有元素都是在自己的标签中组织的,因此您可以在内容中使用带有所需字符的
:after
(带有
font-size:0
)作为分隔符。据我所知,这个解决方案只适用于IE,因为其他浏览器不会选择伪元素。
span:after {
content: " ";
font-size:0;
}
你可以在这个jsfiddle上看到它:http://jsfiddle.net/bc7jrdff/1/(记住只在IE上!)
另一种CSS可能性是在生成页面时直接添加特殊字符,并应用::first-letter
伪元素。这种解决方案的问题是并非所有字符都会被视为第一个字母(空格不算)
使用JavaScript,您可以想出适用于所有浏览器的解决方案:将您的字符附加到元素上(再次使用font-size:0
):
span.hiddenChar {
font-size:0;
}
$(document).ready(function() {
$("span").prepend("<span class='hiddenChar'> </span>");
});
您可以在此处查看其运行情况:http://jsfiddle.net/bc7jrdff/2/
或者,如果您更喜欢不使用jQuery的JavaScript:
<span class="data">23:49</span><span class="data">user</span><span class="data">Hello World!</span>
var aux = document.querySelectorAll(".data");
for (x = 0; x < aux.length; x++) {
aux[x].innerHTML = "<span class='hiddenChar'> </span>" + aux[x].innerHTML;
};
您可以在这个 jsFiddle 上看到:http://jsfiddle.net/bc7jrdff/4/