8

我意识到在美国，大量的数字被格式化为,数千之间，所以你会写$1,000,000.00. 在南非 a,是非标准的，可以用作小数点而不是..

我们会写出$1000000.00难以阅读的内容。典型的解决方案是使用一些空格：$1 000 000.00.

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

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

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

4

2 回答 2

3

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

例如

.currency {
    word-spacing: -2px
}

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

于 2015-04-02T15:55:25.663 回答
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 分隔的 span 代替逗号，从而通过 .space 分隔的 css 为您提供 span 的动态放置和字距控制。

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

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>

于 2015-04-02T15:24:32.210 回答