代码之家 › 专栏 › 技术社区 › Felix

使用CSS格式化HTML表格中的数字和格式化字符串[重复]

css html javascript

Felix · 技术社区 · 4 年前

可以用CSS格式化数字吗? 即:小数位数、小数分隔符、千位分隔符等。

0 回复 | 直到 3 年前

CascadiaJS 4 年前

不幸的是,目前CSS无法实现,但您可以使用 Number.prototype.toLocaleString() 。它还可以格式化其他数字格式,例如拉丁语、阿拉伯语等。

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

Yoann 12 年前

CSS工作组发布了一份草案 Content Formatting 2008年。但现在没有什么新鲜事。

Anton Y. Reuchenko 10 年前

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

Ross 12 年前

最好的方法可能是将设置一个span和一个表示格式的类结合起来,然后使用Jquery。每个类在加载DOM时对span进行格式化。。。

itpastorn 12 年前

这不是答案,但令人感兴趣。我确实发送了 a proposal to the CSS WG 几年前。然而,什么也没发生。如果他们(和浏览器供应商)真的认为这是一个真正的开发人员问题,也许球可以开始滚动了?

mreq 13 年前

不,你必须使用 javascript 一旦它进入DOM或通过您的语言服务器端(PHP/ruby/python等)进行格式化

DanielBlazquez 11 年前

如果它有帮助。。。

我使用PHP函数 number_format() 以及 Narrow No-break Space (   ). 它通常被用作明确的千位分隔符。

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

由于IE8在渲染窄无间断空间时遇到了一些问题,我将其更改为SPAN

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

.number SPAN{
    padding: 0 1px; 
}

DanielBlazquez 4 年前

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

Florin FrÄticÄ 13 年前

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

Community CDub 8 年前

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

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

Mohammad Javed 8 年前

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

格式化数字(2):000.231

格式化数字(3):120000.231

格式化数字(4):120000.231

格式化数字(5):023%

格式化数字(6):12000023.09亿%

格式化数字(7):023%

格式化数字(8):120E3

vacsati 3 年前

另一个改进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]*">

kaiser 2 年前

示例为内联JavaScript input[type=number] -Html字段,使用 Intl vanilla 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));">

Code4R7 3 年前

我能找到的最接近的东西是 <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;
}

-3

robotik 2 年前

至于千个分隔符,这是我在维基百科上发现的,在代码中 this 页面。以下是编号149597870700,其千位分隔符的边距为.15em:

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