用<span>包围每个字符会改变自动换行行为？

Question

我正在尝试创建一个网页，在其中可以分别设置某些元素中每个字符的样式（通过将每个字符包装在<span>中的每个文本节点中）。但是，使用元素上的其他样式，像这样简单地包装每个字母可以改变文本的外观，方法是提前包装单词或在行首插入可见的空格。

function spanEachCharacter(el) {
	if (el.nodeType == Node.TEXT_NODE)
	{
		var text = el.textContent;
		var html = "";
		[...text].forEach(function(c) {
			html += `<span>${escapeHTML(c)}</span>`;
		});
		
		var node = document.createElement("span");
		el.parentNode.insertBefore(node, el);
		el.parentNode.removeChild(el);
		node.outerHTML = html;
	}
	else
	{
		Array.from(el.childNodes).forEach(function(child) {
			spanEachCharacter(child);
		});
	}
}

function escapeHTML(text) {
	var textEl = document.createElement("span");
	textEl.textContent = text;
	return textEl.innerHTML;
}

spanEachCharacter(document.getElementById("text2"));

div {
  background: lightPink;
  width: 235px;
  
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

<div id="text">This is some filler text. Boy, oh boy, do I love filler text. Yes, this filler text couldn't possibly be any better.</div>
<br>
<div id="text2">This is some filler text. Boy, oh boy, do I love filler text. Yes, this filler text couldn't possibly be any better.</div>

我怀疑这与overflow-wrap: break-word风格有关，因为它们在<span>元素中分开后无法识别单词。在保持以前的外观不变的情况下，如何在一个范围内包裹每个字母？

编辑：我能够弄清楚将字符包装在<span>标签中的简单动作将其宽度增加了不可察觉的数量，大约为像素的1/10。这是一个短短语与同一个短语的比较图，每个短语（除空格外）都用<span>标记包裹。

有趣的是，这似乎只出现在Chrome和基于Chrome的浏览器中。这是渲染错误还是什么？