Question

我有一个包含大量数字值的页面。到处都是数百万和数十亿美元。并且很难读取这些数字，所以我的客户要求我将它们分成更易读的三个符号块，“$ 100000000”=＆gt; “1亿美元”。

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

所以，我正在考虑使用CSS将长字符串显示为一组短块。我的第一个想法是writeIntegerAsReadableString()和-moz-column，但不幸的是，它们仅适用于已经被空格分隔的单词。

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

P.S。不需要跨浏览器兼容性。我对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技术，即使可能，也不会跨浏览器。

Answer 4

如果您不愿意使用JavaScript来更改格式，则应该从服务器更改其格式...即，在呈现页面之前。

Answer 5

这是一个可行的建议，虽然我会承认它不是很好 ......

使用jQuery框架，$（“＃myElement”）。text（）只返回文本（不是任何嵌套的html）。所以你可以这样做：

<p>$<span id="myElement"><span class="triad">1</span><span class="triad">000</span><span class="triad">000</span></p>

并应用一些填充或边距以使其更具可读性。

然后你打电话：

$("#myElement").text();

你会得到平原1000000。

CSS：

.triad { padding-left: 5px; }

Answer 6

n1313，http://wiki.csswg.org/ideas/content-formatting;）这不是解决方案，只是想法

Answer 7

function largeNumberToReadableNumber(number){
  var str = Math.floor(amount)+""; //make the integer a string
  var sub = str.substring(str.length-3, str.length); //the last three characters
  newstr = " "+sub;
  var i = 1;
  while (sub.length >= 3){
    sub = str.substring(str.length-((i+1)*3),str.length-(i*3)); //next three characters
    newstr = sub + " " + newstr; //append the characters
    i+=1;
  }
  return newstr;
}

largeNumberToReadable(120312381124124); //will output " 120 312 381 124  124"

我确信这可以写得更好更短，但它可以完成工作。

Answer 8

我发现这条javascript可能会帮助你，如果你打算做客户端： http://homepage.mac.com/ruske/ruske/C2127905073/E844527267/Media/FormatInteger.js

Answer 9

没有CSS操纵字符串。讽刺你必须用JS

来做

Answer 10

我希望CSS可以实现:(你不能获取文本值，并在以后使用CSS的操作中使用它。

Answer 11

如何将数字设为两次：一次用于显示，一次用于操作：

<span class="money" data-value="1000000">$ 1 000 000</span>

然后，您可以轻松地使用getAttribute('data-value')来获取JS中的值，并以您想要的任何方式格式化数字。

data-* attributes是HTML 5中的一项新功能，但几乎所有当前浏览器都支持它（模拟DOM中的.dataset属性，因此您必须使用getAttribute()在当前/较旧的浏览器中。）

Answer 12

首先想到的是:after和:before与content:" "一起使用然后你只需要一些能够在正确的数字周围动态添加标签并为其设置样式的东西。

有没有办法用CSS将长数字（“$ 100000000”）分成更易读的三合一（“$ 100 000 000”）？

12 个答案: