javascript - 如何将转换添加到 unicode 字母

Question

我正在用我的语言制作一些文本动画。但是使用 js 将字母分隔为跨度，结果如下：

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

我使用的脚本是

textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>"); 

html中的结果如下

结果应如下所示： ध्यो，因为这些空白空间在 unicode 中组合在一起。

.letter它仅在应用display:inline-block需要应用转换时才会中断。

有没有办法可以实现ध्यो的结果并且仍然对每个字母应用转换？

标签： javascriptcssdomunicodecss-animations

Answer 1

删除空格 -

更新：我明白了，你不能做内联块

翻译仅适用于

块级或原子内联级元素，或其 'display' 属性计算为 'table-row'、'table-row-group'、'table-header-group'、'table-footer-group'、'table -cell' 或 'table-caption' [CSS21]

document.getElementById("letterDiv").innerText = document.getElementById("spanDiv").innerText;

.letter {
  transform: translate(0.55em, 1.1em) scale(1.5);
  color: green;
}

div.letter {
  position: absolute;
  top: 120px;
  left: 100px;
}

With whitespace<br/>
<span class="letter">ध&lt;/span>
<span class="letter">्&lt;/span>
<span class="letter">य&lt;/span>
<span class="letter">ो&lt;/span>
<hr/> Without

<br/>
<div id="spanDiv">
  <span class="letter">ध&lt;/span><span class="letter">्&lt;/span><span class="letter">य&lt;/span><span class="letter">ो&lt;/span>
</div>
<br/>
<hr/> Block
:<br/>

<div class="letter" id="letterDiv"></div>