我如何将变换添加到Unicode字母

Question

我正在用我的语言制作一些文字动画。但是，将字母分隔为跨度会导致如下所示：

<span class="letter" style="transform: translate(0.55em, 1.1em) scale(1.5);">ध</span>
<span class="letter" style="transform: translate(0.55em, 1.1em);">्</span>
<span class="letter" style="transform: translate(0.55em, 1.1em);">य</span>
<span class="letter" style="transform: translate(0.55em, 1.1em);">ो</span>

并产生如下的html

结果应该看起来像：ध्यो，因为那些空位以unicode组合。

仅在将.letter与应用变换所需的display:inline-block一起使用时才会中断。

有没有一种方法可以实现ध्यो的结果，并且仍然将变换应用于每个字母？

Answer 1

删除空白

With whitespace<br/>
<span class="letter" style="transform: translate(0.55em, 1.1em) scale(1.5);">ध</span>
<span class="letter" style="transform: translate(0.55em, 1.1em);">्</span>
<span class="letter" style="transform: translate(0.55em, 1.1em);">य</span>
<span class="letter" style="transform: translate(0.55em, 1.1em);">ो</span>
<hr/>
Without<br/>

<span class="letter" style="transform: translate(0.55em, 1.1em) scale(1.5);">ध</span><span class="letter" style="transform: translate(0.55em, 1.1em);">्</span><span class="letter" style="transform: translate(0.55em, 1.1em);">य</span><span class="letter" style="transform: translate(0.55em, 1.1em);">ो</span>