大数字的 CSS 字距调整

Question

我意识到在美国，大数的格式是在数千之间使用,，所以你应该写$1,000,000.00。在南非，, 是非标准的，可以用作小数点而不是 .。

我们会写$1000000.00，这很难读。典型的解决方案是使用一些空格：$1 000 000.00。

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

如果我假设值是特定 DOM 元素中的货币格式（即数字后缀为.00，即使它是双零），理想的解决方案是使用 CSS 以某种方式操纵每个倒数第二个的字距-信件。我强烈倾向于不使用 javascript，但也许这是不可能的......

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

Answer 1

我认为使用普通空格然后用 CSS 减小它们的宽度就可以了。

例如

.currency {
    word-spacing: -2px
}

见https://jsfiddle.net/5f9c4cdu/

Answer 2

我认为这是不可能的——通过 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 分隔的 span 代替逗号，从而通过 .space 分隔的 css 为您提供 span 的动态放置和字距控制.

请查看 sn-p 以获取组合示例。

var input = $('.currency.comma-delimited').text();

while (input.indexOf(',') !== -1) {
  input = input.replace(',', '<span class="space-delimited"></span>');
}

$('.currency.comma-delimited').html(input);

.currency .space-delimited:after {
  content: ' ';
  display: inline-block;
  height: 1em;
  width: 0.2em; /* this is your kerning variable! */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='currency comma-delimited'>
  1,000,000.00
</div>