Firefox中双击选中带分隔的6位OTP完整代码的纯HTML解决方案

问题根源在于你将后3位OTP放在独立的<span>元素中，Firefox的双击选中逻辑会限定在元素内部，而Chrome会扩展选中整行连续文本。要实现纯HTML/CSS方案且兼容双端，只需调整间隔的实现方式，保持数字文本的连续性：

代码实现 #

CSS #

.otp-gap {
  display: inline-block;
  margin: 0 0.25em;
}

HTML #

<div>
  123<span class="otp-gap"></span>456
</div>

原理说明 #

将原本包裹后3位数字的<span>改为仅承载间隔样式的空元素，让6位数字保持为连续的文本节点。这样无论是Chrome还是Firefox，双击任意数字时，都会识别到完整的连续文本并全选，同时空<span>通过外边距实现了视觉上的分组间隔，完全满足需求且无需任何JavaScript。

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