使用CSS格式化数字(小数位数,分隔符等)

是否可以使用CSS格式化数字? 即:小数点位,小数点分隔符,千位分隔符等

那么,对于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:

 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; } 

CSS工作组在2008年发布了一个关于内容格式化的草案。但现在没有什么新的。

也许最好的办法是组合设置span表示格式的类,然后使用jquery。每个DOM在加载时进行格式化。

不,你必须在DOM中使用javascript ,或者通过你的语言服务器端来格式化(PHP / ruby​​ / python等)

不是一个答案,而是利益的一页。 几年前,我确实向CSS工作组提交了一份提案 。 但是,什么也没有发生。 如果他们(和浏览器厂商)确实将这看作是一个真正的开发者关注的话,那么也许这个球可能会开始滚动呢?

如果有帮助…

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

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

因为IE8在渲染Narrow No-break Space时遇到了一些问题,所以我把它改成了SPAN

 echo "<span class='number'>".number_format(200000, 0, "", "<span></span>")."</span>"; 
 .number SPAN{ padding: 0 1px; } 

你不能为此使用CSS。 我build议使用JavaScript,如果适用。 看看这个更多的信息: JavaScript相当于printf / string.format

正如彼得所说,你可以在服务器端处理它,但这完全取决于你的情况。

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

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