CSS是否可以将段落中的字母定位为无跨距？

Question

I'm trying to add an effect to my letters, but I don't want to add a bunch of span tags all over the place. Is it possible to target a specific letter within a line of text with CSS?

I know there is :first-child, :first-of-type, :only-child, :last-child, :last-of-type, :only-of-type ,:nth-child, :nth-of-type ,:nth-last-child and :nth-last-of-type I believe. But none of these help do what I want in any combination.

This is what I need to target letter by letter. <p>Hello.</p>

This is what I don't want. Nor lettering.js .

<p>
<span class"somefancyname">H</span>

<span class"somefancyname">e</span>

<span class"somefancyname">l</span>

<span class"somefancyname">l</span>

<span class"somefancyname">o</span>

<span class"somefancyname">.</span>
</p>

Lastly - Is it really bad to use that many span tags? I feel dirty if I use that many... not sure why really. Thanks in advanced! If someone can reword this to make sense - I feel I rambled a bit - thank you!

Note: I want to add different animations to the letters. Not just (1) place on the page - so that's why I'm concerned with multiple span tags. What animations? Some bouncing over here and some color changing over there and maybe some rotating over yonder. Is my only solution to use JS or just give in to the span tags?

Answer 1

I know jquery can do this:

$(document).ready(function(){
count = 0; limit = 10;
var refreshId = setInterval( function() {
if(count < limit) {

$( '.data tr:contains("blah")') .css( {"display":"none"} );
$( '.mainpart h2 a') .css( {"text-decoration":"underline" , "color":"#38c"} )

}
else {
clearInterval(refreshId);
}
}, 2000);
});