redondeo - Formateo de números(decimales, separadores de miles, etc.) con CSS

separador de miles css

Question

¿Es posible formatear números con CSS? Es decir: lugares decimales, separador decimal, separador de miles, etc.

Answer 1

Bueno, para cualquier número en Javascript, uso el siguiente:

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

y si necesita usar cualquier otro separador como coma, por ejemplo:

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

o como una función:

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

Answer 2

El grupo de trabajo de CSS ha publicado un Borrador de formato de contenido en 2008. Pero nada nuevo ahora.

Answer 3

No creo que puedas. Puede usar number_format() si está codificando en PHP. Y otros lenguajes de programación tienen una función para formatear números también.

Answer 4

No es una respuesta, sino perhpas de interés. Envié una propuesta al CSS WG hace unos años. Sin embargo, nada ha sucedido. Si de hecho ellos (y los proveedores de navegadores) verían esto como una verdadera preocupación del desarrollador, ¿quizás la pelota podría comenzar a rodar?

Answer 5

No puedes usar CSS para este propósito. Recomiendo usar JavaScript si es aplicable. Eche un vistazo a esto para obtener más información: JavaScript equivalente a printf / string.format

Además, como mencionó Petr, puedes manejarlo en el lado del servidor, pero depende totalmente de tu situación.

Answer 6

No, tienes que usar javascript una vez que está en el DOM o formatearlo a través de tu lenguaje en el lado del servidor (PHP / ruby ​​/ python, etc.)

Answer 7

Probablemente la mejor manera de hacerlo es combinar un lapso con una clase que denota el formato y luego usar Jquery. Cada forma de hacer el formateo en los tramos cuando se carga el DOM ...

Answer 8

Puede usar Jstl tag Library para formatear 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 formateado (1): £ 120,000.23

Número formateado (2): 000.231

Número Formateado (3): 120,000.231

Número formateado (4): 120000.231

Número formateado (5): 023%

Número formateado (6): 12,000,023.0900000000%

Número formateado (7): 023%

Número Formateado (8): 120E3

Answer 9

Si ayuda ...

Utilizo la función PHP number_format() y el espacio estrecho No-break (   ). A menudo se usa como un separador de miles no ambiguo.

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

Debido a que IE8 tiene algunos problemas para renderizar el Espacio Estrecho No-break, lo cambié por un SPAN

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

.number SPAN{
    padding: 0 1px; 
}