Formattazione di numeri (posizioni decimali, migliaia di separatori, ecc.) Con CSS

È possibile formattare i numeri con CSS? Ovvero: posizioni decimali, separatore decimale, separatore delle migliaia, ecc.

Puoi usare Number.prototype.toLocaleString(). Può anche formattare per altri formati numerici, ad esempio latino, arabo, ecc.

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

Il gruppo di lavoro CSS ha pubblicato una bozza sulla formattazione dei contenuti nel 2008. Ma al momento niente di nuovo.

Bene, per qualsiasi numero in Javascript utilizzo il prossimo:

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

e se è necessario utilizzare qualsiasi altro separatore come virgola, ad esempio:

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

o come funzione:

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

Probabilmente il modo migliore per farlo è combinare l'impostazione di un intervallo con una classe che denota la formattazione, quindi utilizzare Jquery .each per eseguire la formattazione sugli intervalli quando viene caricato il DOM ...

No, devi usare javascript una volta che è nel DOM o formattarlo tramite il tuo linguaggio lato server (PHP / ruby ​​/ python ecc.)

Non una risposta, ma forse di interesse. Ho inviato una proposta al CSS WG alcuni anni fa. Tuttavia, non è successo niente. Se davvero loro (e i fornitori di browser) vedessero questo come una vera preoccupazione per gli sviluppatori, forse la palla potrebbe iniziare a rotolare?

Se aiuta ...

Uso la funzione PHP number_format()e Narrow No-break Space (  ). Viene spesso utilizzato come separatore di migliaia non ambiguo.

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

Poiché IE8 ha alcuni problemi nel rendere lo spazio ristretto no-break, l'ho cambiato per uno SPAN

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

.number SPAN{
    padding: 0 1px; 
}

Non è possibile utilizzare CSS per questo scopo. Consiglio di utilizzare JavaScript se applicabile. Dai un'occhiata a questo per ulteriori informazioni: JavaScript equivalente a printf / string.format

Inoltre, come ha detto Petr, puoi gestirlo sul lato server ma dipende totalmente dal tuo scenario.

Non credo che tu possa. Puoi usare number_format () se stai codificando in PHP. E anche altri linguaggi di programmazione hanno una funzione per la formattazione dei numeri.

È possibile utilizzare la libreria di tag Jstl per la formattazione delle pagine 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>

Risultato

Numero formattato (1): £ 120.000,23

Numero formattato (2): 000.231

Numero formattato (3): 120.000.231

Numero formattato (4): 120000.231

Numero formattato (5): 023%

Numero formattato (6): 12.000.023.0900000000%

Numero formattato (7): 023%

Numero formattato (8): 120E3