Formatar números (casas decimais, separadores de milhares, etc.) com CSS

É possível formatar números com CSS? Ou seja: casas decimais, separador decimal, separador de milhares, etc.

Você pode usar Number.prototype.toLocaleString(). Também pode formatar para outros formatos de números, por exemplo, latim, árabe, etc.

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

O grupo de trabalho CSS publicou um rascunho sobre formatação de conteúdo em 2008. Mas nada de novo no momento.

Bem, para qualquer número em Javascript eu uso o próximo:

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 você precisar usar outro separador como vírgula, por exemplo:

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

ou como uma função:

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

Provavelmente, a melhor maneira de fazer isso é definir uma extensão com uma classe que denota sua formatação e, em seguida, usar Jquery .each para formatar as extensões quando o DOM for carregado ...

Não, você precisa usar o javascript quando ele estiver no DOM ou formatá-lo no lado do servidor de idiomas (PHP / ruby ​​/ python etc.)

Não é uma resposta, mas perhpas de interesse. Enviei uma proposta ao GT CSS alguns anos atrás. No entanto, nada aconteceu. Se, de fato, eles (e os fornecedores de navegadores) veriam isso como uma verdadeira preocupação do desenvolvedor, talvez a bola pudesse começar a rolar?

Se ajudar ...

Eu uso a função PHP number_format()e o Narrow No-break Space (  ). É frequentemente usado como um separador inequívoco de milhares.

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

Como o IE8 tem alguns problemas para renderizar o Narrow No-Break Space, mudei para um SPAN

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

.number SPAN{
    padding: 0 1px; 
}

Você não pode usar CSS para esse fim. Eu recomendo usar JavaScript, se aplicável. Dê uma olhada nisto para obter mais informações: JavaScript equivalente a printf / string.format

Também, como Petr mencionou, você pode lidar com isso no lado do servidor, mas depende totalmente do seu cenário.

Eu acho que você não pode. Você pode usar number_format () se estiver codificando em PHP. E outras linguagens de programação também têm uma função para formatar números.

Você pode usar a biblioteca de tags Jstl para formatar páginas 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>

Resultado

Número formatado (1): £ 120.000,23

Número formatado (2): 000.231

Número formatado (3): 120.000.231

Número formatado (4): 120000.231

Número formatado (5): 023%

Número formatado (6): 12.000.023,0900000000%

Número formatado (7): 023%

Número formatado (8): 120E3