Formatowanie liczb (miejsca dziesiętne, separatory tysięcy itp.) Za pomocą CSS

Czy można formatować liczby za pomocą CSS? To znaczy: miejsca dziesiętne, separator dziesiętny, separator tysięcy itp.

Możesz użyć Number.prototype.toLocaleString(). Może również formatować dla innych formatów liczb, np. Łaciński, arabski itp.

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

Grupa robocza ds. CSS opublikowała wersję roboczą dotyczącą formatowania treści w 2008 r. Ale na razie nic nowego.

Cóż, dla dowolnych liczb w Javascript używam następnego:

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

i jeśli chcesz użyć innego separatora jako przecinka, na przykład:

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

lub jako funkcja:

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

Prawdopodobnie najlepszym sposobem na to jest kombinacja ustawienia rozpiętości z klasą oznaczającą formatowanie, a następnie użycie Jquery .each do formatowania na rozpiętościach, gdy DOM jest ładowany ...

Nie, musisz używać javascript, gdy już jest w DOM lub sformatować go po stronie serwera języka (PHP / ruby ​​/ python itp.)

Nie odpowiedź, ale jakieś interesujące. Wysłałem propozycję do CSS WG kilka lat temu. Jednak nic się nie stało. Jeśli rzeczywiście oni (i dostawcy przeglądarek) uznaliby to za prawdziwy problem programisty, może kula mogłaby zacząć się toczyć?

Jeśli to pomoże ...

Używam funkcji PHP number_format()i Narrow No-Break Space (  ). Często jest używany jako jednoznaczny separator tysięcy.

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

Ponieważ IE8 ma pewne problemy z renderowaniem Narrow No-Break Space, zmieniłem go na SPAN

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

.number SPAN{
    padding: 0 1px; 
}

Nie możesz w tym celu używać CSS. Zalecam używanie JavaScript, jeśli ma to zastosowanie. Spójrz na to, aby uzyskać więcej informacji: odpowiednik JavaScript printf / string.format

Również, jak wspomniał Petr, możesz sobie z tym poradzić po stronie serwera, ale to całkowicie zależy od twojego scenariusza.

Myślę, że nie możesz. Możesz użyć number_format (), jeśli kodujesz w PHP. Inne języki programowania mają również funkcję formatowania liczb.

Do formatowania stron JSP można użyć biblioteki znaczników Jstl

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>

Wynik

Sformatowana liczba (1): 120 000,23

Sformatowana liczba (2): 000,231

Sformatowana liczba (3): 120 000 231

Sformatowany numer (4): 120000.231

Sformatowana liczba (5): 023%

Sformatowana liczba (6): 12000023,0900000000%

Sformatowana liczba (7): 023%

Sformatowana liczba (8): 120E3