使用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