web-dev-qa-db-fra.com

Formatage des nombres (décimales, séparateurs de milliers, etc.) avec CSS

Est-il possible de formater des nombres avec CSS? C'est-à-dire: décimales, séparateur décimal, séparateur de milliers, etc.

csscss3number-formatting
115
Dona

Vous pouvez utiliser Number.prototype.toLocaleString(). Il peut également formater pour d'autres formats de nombres, par exemple. latin, arabe, etc.

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

9
CascadiaJS

Le groupe de travail CSS a publié un brouillon sur Mise en forme du conten en 2008. Mais rien de nouveau pour le moment.

25
Yoann

Bien, pour tous les nombres en Javascript j'utilise le prochain:

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();

et si vous devez utiliser un autre séparateur comme virgule, par exemple:

var sep = ",";
a = a.replace(/\s/g, sep);

ou en fonction:

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;
}
23
Anton Y. Reuchenko

La meilleure façon de le faire consiste probablement à définir une étendue avec une classe indiquant votre mise en forme, puis à utiliser Jquery .each pour effectuer la mise en forme sur les étendues lorsque le DOM est chargé ...

16
Ross

Non, vous devez utiliser javascript une fois que c'est dans le DOM ou le formater via votre langue côté serveur (PHP/Ruby/python, etc.)

9
mreq

Pas une réponse, mais perhpas d'intérêt. J'ai envoyé ne proposition au CSS WG il y a quelques années. Cependant, rien n'est arrivé. Si en effet, ils (et les éditeurs de navigateurs) y voient une véritable préoccupation des développeurs, peut-être que la balle pourrait commencer?

6
itpastorn

Si ça aide ...

J'utilise la fonction PHP number_format() et le Narrow No-break Space ( ). Il est souvent utilisé comme séparateur sans équivoque de milliers de personnes.

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

Parce que IE8 a quelques problèmes pour rendre le Narrow No-Break Space, je l'ai changé pour un SPAN

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

.number SPAN{
    padding: 0 1px; 
}
4
Daniel G. Blázquez

Je ne pense pas que tu peux. Vous pouvez utiliser number_format () si vous codez en PHP. Et d'autres langues de programmation ont aussi une fonction pour formater les nombres.

2
Florin Frătică

Vous ne pouvez pas utiliser CSS à cette fin. Je recommande d'utiliser JavaScript si c'est applicable. Jetez un coup d'œil à cela pour plus d'informations: équivalent JavaScript à printf/string.format

En outre, comme l'a mentionné Petr, vous pouvez le gérer côté serveur, mais cela dépend totalement de votre scénario.

2
Qorbani

Vous pouvez utiliser la bibliothèque de balises Jstl pour formater les pages 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>

Résultat

Nombre formaté (1): 120 000,23 £

Numéro mis en forme (2): 000.231

Numéro mis en forme (3): 120 000.231

Numéro formaté (4): 120000.231

Nombre formaté (5): 023%

Nombre formaté (6): 12 000 023,0900000000%

Nombre formaté (7): 023%

Numéro formaté (8): 120E3

1
Mohammad Javed