Javascript 用<；span>；更改换行符行为？

我正在尝试创建一个网页，在这个网页中，我可以分别为某些元素中的每个字符设置样式（通过在

中包装每个文本节点中的每个字符）。但是，对于元素上的其他样式，像这样简单地包装每个字母会改变文本的外观，可以通过提前包装单词或在行的开头插入可见的空白

函数span每个字符（el）{
if（el.nodeType==Node.TEXT\u Node）
{
var text=el.textContent；
var html=“”；
[…text].forEach（函数（c）{
html+=`${escapeHTML（c）}`；
});
var节点=document.createElement（“span”）；
el.parentNode.insertBefore（节点，el）；
el.parentNode.removeChild（el）；
node.outerHTML=html；
}
其他的
{
数组.from（el.childNodes）.forEach（函数（child）{
spanEachCharacter（儿童）；
});
}
}
函数escapeHTML（文本）{
var textEl=document.createElement（“span”）；
textEl.textContent=文本；
返回textEl.innerHTML；
}
spanEachCharacter（document.getElementById（“text2”）
div{
背景：浅粉红色；
宽度：235px；
空白：预包装；
溢出包装：断开单词；
}
这是一些填充文本。男孩，哦男孩，我爱填充文字。是的，这个填充文字再好不过了。


这是一些填充文本。男孩，哦男孩，我爱填充文字。是的，这个填充文本再好不过了。
一个即时的改进是检查您是否只包装空白字符。@samiult这不会改变任何东西。我甚至在之前的问题编辑中有过它，并把它拿了出来，因为我意识到它并没有改变它的外观。好吧。我认为，之所以会发生这些小变化，是因为浏览器试图使文本尽可能可读（有许多算法，部分可通过特定于浏览器的css控制），并考虑字体的字距数据。如果渲染跨距，它们将作为内联通道进行布局，而且由于技术上没有字符对，因此紧排的方式不同。@SamiHult啊，这至少有点道理。那么，我假设Firefox和Edge使用的任何字体渲染器都会考虑相邻span元素之间的字符对？这在这两种浏览器中都不会发生。要获得真正的洞察力，我们需要一些内部/专家知识。