如何用CSS格式化EAN13条码字符串并实现特定位置宽间距？

原来的方案用flex拆分多个div，会把文本分割成独立的块级单元，导致无法双击选中整个条码字符串。以下是两种可行的解决方案，既能实现指定位置的宽间距，又支持双击全选：

方案一：用inline元素包裹分组（推荐） #

通过span包裹需要加间距的部分，保持文本流连续，同时用margin实现宽间距：

JavaScript格式化函数 #

function format_barcode_ean13(v){
  return `<span class="ean13-barcode">
    <span class="wide-gap">${v.substring(0, 1)}</span>
    <span class="wide-gap">${v.substring(1, 7)}</span>
    ${v.substring(7, 13)}
  </span>`;
}

CSS样式 #

.ean13-barcode {
  white-space: nowrap; /* 防止换行 */
}
.ean13-barcode .wide-gap {
  margin-right: 4px; /* 自定义宽间距大小 */
}

这种方式生成的DOM是连续的inline元素，双击可以直接选中整个条码字符串，同时在第1位和第7位后保留了设定的宽间距。

方案二：插入宽空格字符（无需CSS） #

直接在字符串的指定位置插入全角空格（\u2003），无需额外样式，但会修改原始字符串内容：

function format_barcode_ean13(v){
  return `${v[0]}\u2003${v.slice(1,7)}\u2003${v.slice(7)}`;
}

注意：这种方法生成的字符串包含空格，复制时会一并带出，适合不需要纯数字复制的场景。

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