Firefox下contenteditable自动删除尾部空格Chrome运行正常原因求解

• innerText的浏览器实现不一致：在Firefox的contenteditable场景中，输入尾部空格后触发input事件时，读取innerText会直接裁剪末尾的连续空白字符，此时刚输入的空格还未被转换为不折叠的 ，在读值阶段就已经丢失。Chrome的innerText针对contenteditable输入场景做了特殊处理，会保留输入过程中的末尾临时空格，因此不会出现该问题。
• HTML空白折叠规则的执行差异：就算读值时拿到了尾部空格，直接将普通文本赋值给innerHTML时，HTML默认的空白折叠规则会将行尾普通空格判定为无意义字符，不进行渲染。Chrome针对contenteditable的innerHTML赋值操作做了额外兼容，会自动保留末尾空格的渲染，Firefox严格遵循标准规则，因此空格直接消失。

下面两个方案二选一即可：

1. CSS层面修复：给contenteditable元素添加white-space: pre-wrap规则，强制浏览器保留所有空白字符（包括尾部空格、换行），从渲染层面禁止空白折叠。

#content {
  border: solid 1px #555;
  white-space: pre-wrap;
}

2. JS文本处理层面修复：格式化文本时主动将末尾空格替换为 ，保证赋值给innerHTML时不会被折叠。

function formatText(text) {
  return text.replaceAll('#', '<b>#</b>').replace(/\s+$/, match => '&nbsp;'.repeat(match.length));
}

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