使用 CSS 格式化数字(小数位、数千个分隔符、本地化等)

可以用 CSS 格式化数字吗？ 也就是: 小数位、小数点、千位分隔符等等。

233244 次浏览
小开

不，你必须使用 Javascript一旦它在 DOM 或格式化它通过您的语言服务器端(PHP/Ruby/python 等。)

小开

不能为此目的使用 CSS。如果可行的话，我建议使用 JavaScript。更多信息请参见: 等效于 printf/string.format 的 JavaScript

另外，正如 Petr 提到的，您可以在服务器端处理它，但这完全取决于您的场景。

小开

我觉得你做不到。如果使用 PHP 编码，则可以使用 Number _ format ()。其他编程语言也有格式化数字的功能。

小开

该 CSS工作小组已于2008年在 内容格式上发表了一份草案。 但现在没什么新鲜事。

小开

也许最好的方法是组合使用一个表示格式的类来设置 span，然后使用 Jquery。每个都在加载 DOM 时对跨区进行格式化..。

小开

不是答案，但也许有点意思。几年前我确实发送了 向 CSS 工作组提出的建议。然而，什么也没有发生。如果他们(以及浏览器供应商)确实将此视为开发人员真正关心的问题，也许这个球可以开始滚动了？

小开

如果有帮助的话。

我使用 PHP 函数 number_format()和 狭窄的不间断空间( )。它经常被用作一个明确的千分隔符。

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

因为 IE8在呈现窄无中断空间方面有一些问题，所以我将其改为 SPAN

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

.number SPAN{
padding: 0 1px;
}
小开

对于 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;
}
小开

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

小开
最佳答案

不幸的是，目前不能使用 CSS，但是您可以使用 Number.prototype.toLocaleString()。它还可以格式化其他数字格式，如拉丁文、阿拉伯文等。

Https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/number/tolocalestring

小开

另一个解决方案使用纯 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

小开

另一个改善 Skeeve 工作的 js 解决方案:

<input type="text" onkeyup="this.value=this.value.toString().replaceAll(/[^\d]/g, '').replaceAll(/(\d)(?=(?:\d\d\d)+$)/g, '$1\u202f')" pattern="[0-9\s]*">

小开

我能找到的最接近的东西是 <input type="number" />标记，它确实在纯 HTML 中进行格式化，但也是一个输入字段。为了使它看起来像纯文本，您可以使用一些 CSS。

不幸的是，我不知道如何修复没有 JavaScript 或使用单空间字体的右边距，并设置宽度属性服务器端。

HTML:

<p>In <input type="number" value="1.223" readonly="readonly" size="1" /> line</p>

CSS:

p {font-family: verdana;}
input {
font-family: verdana;
font-size: 16px;
}
input[readonly] {
border: 0;
padding: 0;
margin: 0;
min-width: 3em;
font-size: 16px;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
小开

至于上千个分隔符，这是我在维基百科上找到的，在 这个页面的代码中。下面是数字149597870700，边距为0.15 em 的千个分隔符:

<span style="white-space:nowrap">
149
<span style="margin-left:.15em;">597</span>
<span style="margin-left:.15em;">870</span>
<span style="margin-left:.15em;">700</span>
</span>

小开

例如在 input[type=number]-Html 字段中使用 inline-JavaScript，使用 香草 JS:

<input class="form-number"
type="number"
id="bar"
name="foo"
value=""
step="any"
min="0"
size="20"
onfocusout="this.value = (new Intl.NumberFormat('de-DE').format(this.value));">

提交答案