Formatieren von Zahlen (Dezimalstellen, Tausendertrennzeichen usw.) mit CSS

Ist es möglich, Zahlen mit CSS zu formatieren? Das heißt: Dezimalstellen, Dezimaltrennzeichen, Tausendertrennzeichen usw.

Sie können verwenden Number.prototype.toLocaleString(). Es kann auch für andere Zahlenformate formatiert werden, z. B. Latein, Arabisch usw.

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

Die CSS-Arbeitsgruppe hat 2008 einen Entwurf zur Formatierung von Inhalten veröffentlicht. Derzeit ist jedoch nichts Neues.

Nun, für alle Zahlen in Javascript verwende ich die nächste:

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

und wenn Sie ein anderes Trennzeichen als Komma verwenden müssen, zum Beispiel:

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

oder als Funktion:

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

Der wahrscheinlich beste Weg, dies zu tun, besteht darin, einen Bereich mit einer Klasse festzulegen, die Ihre Formatierung angibt, und dann Jquery .each zu verwenden, um die Bereiche zu formatieren, wenn das DOM geladen wird ...

Nein, Sie müssen Javascript verwenden, sobald es sich im DOM befindet, oder es über die Seite Ihres Sprachservers formatieren (PHP / Ruby / Python usw.).

Keine Antwort, aber vielleicht von Interesse. Ich habe vor einigen Jahren einen Vorschlag an die CSS WG gesendet. Es ist jedoch nichts passiert. Wenn sie (und Browser-Anbieter) dies tatsächlich als echtes Entwicklerproblem ansehen würden, könnte der Ball vielleicht ins Rollen kommen?

Wenn es hilft ...

Ich benutze die PHP-Funktion number_format()und den Narrow No-Break Space (  ). Es wird oft als eindeutiger Tausendertrenner verwendet.

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

Da IE8 einige Probleme beim Rendern des Narrow No-Break Space hat, habe ich ihn für ein SPAN geändert

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

.number SPAN{
    padding: 0 1px; 
}

Sie können CSS für diesen Zweck nicht verwenden. Ich empfehle die Verwendung von JavaScript, falls zutreffend. Weitere Informationen finden Sie hier: JavaScript entspricht printf / string.format

Wie Petr bereits erwähnt hat, können Sie es serverseitig handhaben, aber es hängt völlig von Ihrem Szenario ab.

Ich glaube nicht, dass du kannst. Sie können number_format () verwenden, wenn Sie in PHP codieren. Andere Programmiersprachen haben auch eine Funktion zum Formatieren von Zahlen.

Sie können die Jstl-Tag-Bibliothek zum Formatieren von JSP-Seiten verwenden

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>

Ergebnis

Formatierte Nummer (1): £ 120.000,23

Formatierte Nummer (2): 000.231

Formatierte Nummer (3): 120.000,231

Formatierte Nummer (4): 120000.231

Formatierte Zahl (5): 023%

Formatierte Nummer (6): 12.000.023,0900000000%

Formatierte Zahl (7): 023%

Formatierte Nummer (8): 120E3