关于CSS3：使用CSS格式化数字(小数位，千位分隔符等)

Formatting numbers (decimal places, thousands separators, etc) with CSS

是否可以使用CSS格式化数字？
即：小数位，小数点分隔符，千位分隔符等。

CSS工作组已于2008年发布了内容格式草案。
但是，现在没有新内容了。

好吧，对于Javascript中的任何数字，我都使用下一个：

1 2	var a ="1222333444555666777888999"; a = a.replace(new RegExp("^(\\d{" + (a.length%3?a.length%3:0) +"})(\\d{3})","g"),"$1 $2").replace(/(\d{3})+?/gi,"$1").trim();

并且如果您需要使用任何其他分隔符作为逗号，例如：

1 2	var sep =","; a = a.replace(/\s/g, sep);

或作为功能：

1
2
3
4
5
6
7
8

相关讨论

这样做的最好方法可能是将一个span设置为一个表示格式的类，然后使用Jquery .each在加载DOM时对span进行格式化。

您可以使用Number.prototype.toLocaleString()。它还可以格式化为其他数字格式，例如拉丁语，阿拉伯语等

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

相关讨论

不，您必须在DOM中使用javascript或通过您的语言服务器端(PHP / ruby?? / python等)对其进行格式化。

相关讨论

不是答案，而是令人感兴趣的观点。几年前，我确实向CSS WG发送了提案。但是，什么也没发生。如果确实他们(和浏览器供应商)将这视为真正的开发人员关注，那么可能会开始滚滚球吗？

相关讨论

如果有帮助...

我使用PHP函数number_format()和窄无间断空格( )。它通常用作明确的千位分隔符。

1	echo number_format(200000, 0,""," ");

由于IE8在渲染窄的不间断空间方面存在一些问题，因此我将其更改为SPAN

1	echo"<span class='number'>".number_format(200000, 0,"","<span></span>")."</span>";

1
2
3

.number SPAN{
padding: 0 1px;
}

相关讨论

我认为你不能。如果您使用PHP编码，则可以使用number_format()。其他编程语言也具有格式化数字的功能。

相关讨论

您不能为此目的使用CSS。我建议使用JavaScript(如果适用)。请看一下更多信息：相当于printf / string.format的JavaScript

另外，正如Petr所提到的，您可以在服务器端进行处理，但这完全取决于您的方案。

您可以使用Jstl标记库来格式化JSP页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

JSP Page
//import the jstl lib
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %>

<c:set var="balance" value="120000.2309" />

Formatted Number (1): <fmt:formatNumber value="${balance}"
type="currency"/>


Formatted Number (2): <fmt:formatNumber type="number"
maxIntegerDigits="3" value="${balance}" />


Formatted Number (3): <fmt:formatNumber type="number"
maxFractionDigits="3" value="${balance}" />


Formatted Number (4): <fmt:formatNumber type="number"
groupingUsed="false" value="${balance}" />


Formatted Number (5): <fmt:formatNumber type="percent"
maxIntegerDigits="3" value="${balance}" />


Formatted Number (6): <fmt:formatNumber type="percent"
minFractionDigits="10" value="${balance}" />


Formatted Number (7): <fmt:formatNumber type="percent"
maxIntegerDigits="3" value="${balance}" />


Formatted Number (8): <fmt:formatNumber type="number"
pattern="###.###E0" value="${balance}" />

结果

格式化的数字(1)：￡ 120,000.23

格式化的数字(2)：000.231

格式化的数字(3)：120,000.231

格式化的数字(4)：120000.231

格式化数字(5)：023％

格式化数字(6)：12,000,023.0900000000％

格式化数字(7)：023％

格式化的数字(8)：120E3