Javascript 在跨距之间添加一个空格，以便即使删除跨距后字符串看起来也正常

这是我的一段代码。使用for循环，我用一个特定的span及其id和class来包装每个span元素，然后将它们作为一个句子添加到页面中

使用jQuery 2秒钟后，我删除了跨距，同时保持整个句子如下：

// After 2 seconds remove spans and maintain text
$('#answerSentence').find(".spans").contents().unwrap();

问题是我找不到一种方法在跨距之间添加空格，这样句子看起来就正常了。到目前为止，跨距之间没有空格，只有当我们在removeSpans函数中删除跨距时，在单词间距的情况下，句子看起来才正常

我不想在2秒钟后改变字间距

注意：我希望removeSpans函数中的AnswerSession不包含任何

让我们来回答短语=[“我被派往地球”，“活着”]； 我被送到地球去生活； 让我们回答=； //将每个span短语放入带有id和class的span中 对于let i=0；i.长度；i++{ 答案+=`${spani]}`； }; //将带有跨距的文本添加到页面 AnswerSession.innerHTML=`${answer}`； setTimeoutfunction{ 移除平底锅； 函数removeSpans{ //2秒后删除跨距并保留文本 $'AnswerSession'.find.span.contents.unwrap； } }, 2000 .集装箱更换{ 位置：绝对位置； 溢出：隐藏； 左：9.5vw； 顶部：48vh； 高度：29vh； 宽度：82vw； 轮廓：0.1vw橙色虚线； } .回答句子类{ 位置：绝对位置； 空白：nowrap； 字体系列：“开放式Sans”，无衬线； 字体大小：150%； 字号：700； 颜色：rgb128、128、128； 左：0.5vw； 不透明度：1； 保证金：0； 排名：0； 底部：4vh； 显示器：flex； 对齐项目：居中； }

---

您的JavaScript是正确的。您应该修复CSS样式。如果替换显示：flex，这种奇怪的行为就会消失；对齐项目：居中；线路高度：29vh；要在.AnswerSession类的父容器内对齐

我将对CSS进行如下更改：

.answerSentence-class {
  position: absolute;
  white-space: nowrap;
  font-family: 'Open Sans', sans-serif;
  font-size: 150%;
  font-weight: 700;
  color: rgb(128, 128, 128);
  left: 0.5vw;
  opacity: 1;
  margin: 0;
  top: 0;
  bottom: 4vh;
  line-height: 29vh;
}

---

不幸的是，我没有答案为什么flex会截断空格。

为什么不将文本换行改为预换行

让我们来回答短语=[“我被派往地球”，“活着”]； 我被送到地球去生活； 让我们回答=； //将每个span短语放入带有id和class的span中 对于let i=0；i.长度；i++{ 答案+=`${spani]}`； }; //将带有跨距的文本添加到页面 AnswerSession.innerHTML=`${answer}`； setTimeoutfunction{ 移除平底锅； 函数removeSpans{ //2秒后删除跨距并保留文本 $'AnswerSession'.find.span.contents.unwrap； } }, 2000 .集装箱更换{ 位置：绝对位置； 溢出：隐藏； 左：9.5vw； 顶部：48vh； 高度：29vh； 宽度：82vw； 轮廓：0.1vw橙色虚线； } .回答句子类{ 位置：绝对位置； 空白：预换行；//更新文本换行 字体系列：“开放式Sans”，无衬线； 字体大小：150%； 字号：700； 颜色：rgb128、128、128； 左：0.5vw； 不透明度：1； 保证金：0； 排名：0； 底部：4vh； 显示器：flex； 对齐项目：居中； }