有没有办法用CSS将长数字("$ 100000000")分成更易读的三合一("$ 100 000 000")？

Question

我有一个包含大量数值的页面.到处都是数百万和数十亿美元.并且很难读取这些数字,所以我的客户要求我将它们分成更易读的三个符号块,"$ 100000000"=>"$ 100 000 000".

这是完全合理的请求,但问题是我不想在服务器端执行此操作,而且我不想使用javascript执行此操作.你知道,我已经在这个页面上运行了一大堆javascript,对这些长数字进行了复杂的计算,而且很难parseReadableStringToInteger()在每个从页面读取数据的地方插入一个并且writeIntegerAsReadableString()在每个写入结果的地方都插入一个回到页面.

所以,我正在考虑使用CSS将长字符串显示为一组短块.我首先想到的是中-moz-column和-webkit-column,但不幸的是,他们只用那些已经由空格分隔的单词工作.

也许有另一种方式？欢迎任何建议.

ps不需要跨浏览器兼容性.我对Gecko和/或Webkit没问题.

Answer 1

没有办法通过CSS来实现,但您可以像这样扩展Number类型:

    Number.prototype.formatMoney = function(c, d, t){
    var n = this, c = isNaN(c = Math.abs(c)) ? 2 : c, d = d == undefined ? "," : d, t = t == undefined ? "." : t, s = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
       return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
    };

然后像这样使用它:

var count = 10000000;
count.formatMoney(2, '.', ' ')

Answer 2

该死的,我快到了!

span {
    display: block;
    -moz-column-gap:5px;
    -moz-column-width:24px;
    word-wrap:break-word;
}

<span>100000</span>
<span>1000000</span>
<span>10000000</span>
<span>100000000</span>

给我

100 000
100 000 0
100 000 00
100 000 000

唯一剩下的就是以某种方式从右边开始分裂.现在尝试direction: rtl和这样:)

Answer 3

我非常确定，你必须找到一种 JavaScript 方法来做到这一点。任何 CSS 技术，即使有可能，也不会是跨浏览器的。