Question

我意识到在这些州中，大数字的格式为千位,，因此您可以编写$1,000,000.00。在南非，,是非标准的，可以用作小数点而不是.。

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

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

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

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

Answer 1

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

e.g。

.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-delimited span来代替逗号，从而通过.space-delimited css为您提供动态放置跨度和控制字距调整

请查看摘录以获取合并示例。

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>

用于大数字的CSS字距调整

2 个答案: