Question

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

Answer 1

CSS工作组已于2008年在Content Formatting上发布草案。但现在没什么新鲜的。

Answer 2

好吧，对于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;
}

Answer 3

这样做的最佳方法可能是使用表示格式的类设置span，然后使用Jquery .each在加载DOM时对跨度进行格式化...

Answer 4

不，你必须在DOM中使用javascript或通过语言服务器端（PHP / ruby / python等）格式化它。

Answer 5

不是答案，而是感兴趣的。几年前我确实发过a proposal to the CSS WG。但是，什么也没发生。如果他们（以及浏览器供应商）确实认为这是一个真正的开发者关注点，那么球可能会开始滚动吗？

Answer 6

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

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

Answer 7

如果有帮助......

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

echo number_format(200000, 0, "", "&#8239;");

因为IE8在渲染Narrow No-break空间方面存在一些问题，所以我将其改为SPAN

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

.number SPAN{
    padding: 0 1px; 
}

Answer 8

您不能将CSS用于此目的。如果适用，我建议使用JavaScript。请查看此信息以获取更多信息：JavaScript equivalent to printf/string.format

同样，Petr提到你可以在服务器端处理它，但这完全取决于你的场景。

Answer 9

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

Answer 10

您可以使用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

Answer 11

另一种使用纯 CSS+HTML 和伪类 :lang() 的解决方案。

使用一些 HTML 用类 thousands-separator 和 decimal-separator 标记数字：

<html lang="es">
  Spanish: 1<span class="thousands-separator">200</span><span class="thousands-separator">000</span><span class="decimal-separator">.</span>50
</html>

使用 lang 伪类来格式化数字。

/* Spanish */
.thousands-separator:lang(es):before{
  content: ".";
}
.decimal-separator:lang(es){
  visibility: hidden;
  position: relative;
}
.decimal-separator:lang(es):before{
  position: absolute;
  visibility: visible;
  content: ",";
}

/* English and Mexican Spanish */
.thousands-separator:lang(en):before, .thousands-separator:lang(es-MX):before{
  content: ",";
}

代码笔： https://codepen.io/danielblazquez/pen/qBqVjGy

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

11 个答案: