JavaScript代码中的空格为何在HTML渲染时显示为换行？

这个现象根本不是JavaScript里设置的空格被转成了换行符，本质是浏览器默认的HTML文本排版规则在生效：

• HTML渲染普通文本时，代码里写入的半角普通空格属于浏览器默认认可的软换行断点，当承载内容的<td>容器宽度不足以放下整段拼接完成的长文本时，浏览器会自动选择最近的软换行位置折行显示，视觉上就呈现出空格位置变成换行的效果。
• 你代码里To:后面用的 是不换行空格，本身不会成为折行断点，但join('; ')里的空格是普通半角空格，刚好就成了浏览器优先选择的折行位置，才会出现你看到的分号后换行的效果。

根据你需要的展示效果选对应方案即可：

• 方案1：调整CSS换行规则，适配长邮箱展示场景
  给.receiver类添加如下样式，避免在短空格位置无意义折行，仅当单个邮箱长度超出容器宽度时才在内容内部折行，展示效果更自然：

.receiver {
  overflow-wrap: break-word;
  word-break: break-word;
}

• 方案2：替换分隔符里的普通空格为不换行空格
  如果你希望分号和后面紧跟的邮箱地址绑定展示，不要在分号后面折行，直接把join方法里的普通空格换成 即可：

let receiver = document.createElement('td');
tableRow.append(receiver);
receiver.innerHTML = `To: ${email.recipients.join('; ')}`;
receiver.classList.add('receiver');

• 方案3：完全禁止内容折行
  如果你的布局允许整行收件人内容不换行，直接给元素加不换行样式即可：

.receiver {
  white-space: nowrap;
}

内容的提问来源于stack exchange，提问作者Aya Othman