使用CSS格式化数字（小数位数，数千个分隔符等）

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

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

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

CSS工作组已于2008年发布了有关内容格式的草案。

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

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();

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

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

或作为功能：

function numberFormat(_number, _sep) {
    _number = typeof _number != "undefined" && _number > 0 ? _number : "";
    _number = _number.replace(new RegExp("^(\\d{" + (_number.length%3? _number.length%3:0) + "})(\\d{3})", "g"), "$1 $2").replace(/(\d{3})+?/gi, "$1 ").trim();
    if(typeof _sep != "undefined" && _sep != " ") {
        _number = _number.replace(/\s/g, _sep);
    }
    return _number;
}

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

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

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

如果有帮助...

我使用PHP函数number_format()和Narrow No-break Space（ ）。它通常用作明确的千位分隔符。

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

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

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

.number SPAN{
    padding: 0 1px; 
}

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

就像Petr提到的那样，您可以在服务器端进行处理，但这完全取决于您的方案。

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

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

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

<c:set var="balance" value="120000.2309" />
<p>Formatted Number (1): <fmt:formatNumber value="${balance}" 
        type="currency"/></p>
<p>Formatted Number (2): <fmt:formatNumber type="number" 
        maxIntegerDigits="3" value="${balance}" /></p>
<p>Formatted Number (3): <fmt:formatNumber type="number" 
        maxFractionDigits="3" value="${balance}" /></p>
<p>Formatted Number (4): <fmt:formatNumber type="number" 
        groupingUsed="false" value="${balance}" /></p>
<p>Formatted Number (5): <fmt:formatNumber type="percent" 
        maxIntegerDigits="3" value="${balance}" /></p>
<p>Formatted Number (6): <fmt:formatNumber type="percent" 
        minFractionDigits="10" value="${balance}" /></p>
<p>Formatted Number (7): <fmt:formatNumber type="percent" 
        maxIntegerDigits="3" value="${balance}" /></p>
<p>Formatted Number (8): <fmt:formatNumber type="number" 
        pattern="###.###E0" value="${balance}" /></p>

结果

格式化的数字（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