用于大数字的CSS字距调整

Question

我意识到,在这些州,大数字的格式化,数以千计,所以你会写$1,000,000.00.在南非,a ,是非标准的,可以用作小数点代替..

我们会写$1000000.00一些可怕的内容.典型的解决方案是使用一些空格:$1 000 000.00.

该解决方案的问题在于它仍然看起来很糟糕.

如果我假设值是在特定DOM元素中格式化的货币(即,.00即使它是双零,数字也是后缀),理想的解决方案是使用CSS以某种方式操纵每个第n个最后一个字母的字距.我强烈建议不要使用javascript,但也许这是不可能的......

这样的事情可能吗？什么是最好的解决方案？

Answer 1

我认为这是不可能的——通过 CSS 来操纵字体的字距调整。最好的选择是找到一种内置理想字距调整的字体并使用它。

但是，由于您需要可变字距调整，因此我不得不推荐使用 JS。这将是一个简单的脚本。

html:

<div class='currency comma-delimited'>1,000,000.00</div>

jQuery 代码：

var input = $('.currency.comma-delimited').text();
while(input.indexOf(',') != -1) {
    //replace each comma with a space
    input = input.replace(',',' ');
}
$('.currency.comma-delimited').text(input);

以下基于 CSS 的解决方案很荒谬，您不应该使用它：

html:

<div class='currency'>
1<span class='space-delimited'></span>000</span class='space-delimited'></span>000.00
</div>

CSS：

.currency .space-delimited:after {
    content:' ';
    display:inline-block;
    height:1em;
    width:0.5em; /* control the size of the space, essentially the kerning */
}

实际上，您可以将 JS 解决方案与此 CSS 解决方案结合起来，注入 .space 分隔的跨度来代替逗号，从而通过 .space 分隔的 css 动态放置跨度并控制字距调整。

请查看代码片段以获取组合示例。

<div class='currency comma-delimited'>1,000,000.00</div>

var input = $('.currency.comma-delimited').text();
while(input.indexOf(',') != -1) {
    //replace each comma with a space
    input = input.replace(',',' ');
}
$('.currency.comma-delimited').text(input);

<div class='currency'>
1<span class='space-delimited'></span>000</span class='space-delimited'></span>000.00
</div>