CSS是否可以將段落中的字母定位為無跨距？

Question

我正在嘗試給字母添加效果，但是我不想在各處添加一堆span標簽。 是否可以使用CSS在一行文本中定位特定字母？

我知道有:first-child, :first-of-type, :only-child, :last-child, :last-of-type, :only-of-type ,:nth-child, :nth-of-type ,:nth-last-child我相信:first-child, :first-of-type, :only-child, :last-child, :last-of-type, :only-of-type ,:nth-child, :nth-of-type ,:nth-last-child和:nth-last-of-type 。 但是，這些幫助都無法以我的期望來完成。

這就是我要逐字針對的目標。 <p>Hello.</p>

這就是我所不想要的。 也沒有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>

最后-使用那么多的span標簽真的不好嗎？ 如果使用那么多，我會覺得很臟...不確定為什么。 提前致謝！ 如果有人可以改寫為有意義的話-我覺得我有點胡亂-謝謝！

注意：我想在字母上添加不同的動畫。 不僅（1）放在頁面上-這就是為什么我關注多個span標簽。 什么動畫？ 一些在這里彈跳，一些在那改變顏色，也許一些在上方旋轉。 是我使用JS還是僅允許使用span標簽的唯一解決方案？

Answer 1

我知道jQuery可以做到這一點：

$(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);
});