在特定字符之间具有更宽空间的格式字符串答案

【问题标题】：format string with wider space between specific chars在特定字符之间具有更宽空间的格式字符串
【发布时间】：2023-01-27 21:45:13
【问题描述】：

如何使用 CSS 格式化条形码 EAN13 字符串并在特定字符/数字之间添加更宽的空间？想要在 char 1 和 char 7 之后添加更宽的空间

https://boxshot.com/barcode/tutorials/ean-13-calculator/ean-13-barcode-check-digit.svg

现在我使用这个函数来格式化字符串

function format_barcode_ean13(v){
    return `<div style="display:inline-flex; gap:4px">
    <div>${v.substring(0, 1)}</div>
    <div>${v.substring(1, 7)}</div>
    <div>${v.substring(7, 13)}</div>
</div>`;
}

但是在使用上述功能时，您不能双击字符串来选择整个字符串。仅选择组（弹性项目）。

我需要能够在字符之间应用更宽的空间，并且仍然能够双击然后选择所有内容

【问题讨论】：

标签： css

【解决方案1】：

您可以在特定字符之间添加不间断空格 ( ) 以创建更宽的间距，而不会影响选择整个字符串的能力。以下是如何使用此方法格式化字符串的示例：

function format_barcode_ean13(v){
return `<div style="display:inline-block;">
${v.substring(0, 1)}&nbsp;
${v.substring(1, 7)}&nbsp;
${v.substring(7, 13)}</div>`;}

【讨论】：

当您双击字符串的一部分时，只会选择“组”

【解决方案2】：

您可以为单个字符设置 letter-spacing 并在它们之前产生更宽的间隙：

&lt;p&gt;12&lt;span style="letter-spacing: 2em;"&gt;3&lt;/span&gt;45&lt;span style="letter-spacing: 2em;"&gt;6&lt;/span&gt;789&lt;/p&gt;

【讨论】：