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

Posted 2023-04-13

【中文标题】有没有办法用 CSS 将长数字（“$100000000”）分解成更易读的三元组（“$100 000 000”）？

【英文标题】：Is there a way to break long numbers ("$100000000") into more readable triads ("$100 000 000") with CSS?

【发布时间】：2010-02-26 11:14:48

【问题描述】：

我有一个包含很多大数值的页面。数以百万计的资金流向各处。而且这些数字很难阅读，所以我的客户要求我将它们分成三个符号的更易读的块，“$100000000”=>“$100 000 000”。

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

所以，我正在考虑使用 CSS 将长字符串显示为一组短块。我首先想到的是-moz-column 和-webkit-column，但不幸的是，它们只适用于已经用空格分隔的单词。

也许还有其他方法？欢迎提出任何建议。

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

【问题讨论】：

就我所知道的 CSS(3) 而言，不是所有的浏览器都能以您想要的方式查看数字，如果它是使用 CSS3 完成的。为什么不只是在服务器端做呢？似乎是迄今为止解决您问题的最简单方法。

我不认为有任何方法可以做到这一点 - 服务器端输出确实是最好的。

我对一些 CSS3 魔法的希望非常高，因为我对其功能的了解很浅。自动换行的一些奇怪组合：break-word；和 -moz-column 和魔法：more-magic;，有人吗？

如果只在 Firefox 3 中运行会不会有问题？如果是这样，我认为您需要停止寻找 CSS 解决方案。

当然我会提出反对意见，即并非所有文化都将数字分组为 3 个组

【参考方案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(/(\d3)(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
    ;

然后像这样使用它：

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

【参考方案2】：

该死的，我就快到了！！

跨度 显示：块； -moz-column-gap：5px； -moz 列宽：24 像素； 自动换行：断词； 100000 1000000 10000000 100000000

给我

100 000 100 000 0 100 000 00 100 000 000

剩下的唯一事情就是以某种方式从右侧开始分裂。现在正在尝试direction: rtl 等:)

【讨论】：

您需要绝对确定字体的像素宽度，对吗？尝试使用不以全零结尾的数字（这样列间距将在字符串右侧的不同像素偏移处）。

嗯，是的，当然，它需要在后期进行一些微调:)

你能不能用一些转换来把文本从右到左，然后再从左到右（即通过嵌套）

只是想我会提到它可能值得一看 CSS3 伪选择器nth-child(n)。问题是，它不会选择“第 n 个字母”，但如果你将所有数字都包裹在跨度中，它会起作用。 （虽然丑）然后你可以这样做：p :nth-child(3n)margin-left:3px 与你正在搞乱的列属性位于同一区域。

【参考方案3】：

您将不得不找到一种 JavaScript 方法来执行此操作，我很确定。任何 CSS 技术，即使可能，也不会跨浏览器。

【讨论】：

跨浏览器兼容性暂时不是问题。我对 Gecko 和/或 Webkit 没问题。

【参考方案4】：

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

【参考方案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; 

【讨论】：

我已经在问题文本中提到了这种方法，请注意“parseReadableStringToInteger()”和“writeIntegerAsReadableString()”函数。如果没有其他方法，我会走这条路，因为有 230kb 的 javascript 需要修补，而且我很懒。 :)

您应该仍然可以使用document.getElementById("myElement").textContent 来取回文本。 innerHTML 在这里是不必要的。

【参考方案6】：

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

【参考方案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"

我相信这可以写得更好更短，但它确实有效。

【参考方案8】：

我发现了这段 javascript，如果您要在客户端执行此操作，它可能会对您有所帮助： http://homepage.mac.com/ruske/ruske/C2127905073/E844527267/Media/FormatInteger.js

【参考方案9】：

没有 CSS 处理字符串。对不起，你必须用 JS 来做

【参考方案10】：

将数字设置两次怎么样：一次用于显示，一次用于这样的操作：

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

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

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

【参考方案11】：

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

【参考方案12】：

首先想到的是使用:after 和:before 和content:" " 然后，您只需要在正确的数字周围动态添加标签并为其设置样式。