Formatear números (decimales, separadores de miles, etc.) con CSS

Question

Formatear números (decimales, separadores de miles, etc.) con CSS

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

98

css css3 number-formatting

Author: BoltClock, 2011-12-30

Source

9 answers

El grupo de trabajo CSS ha publicado un borrador sobre Formato de contenido en 2008. Pero nada nuevo en este momento.

24

Author: DoubleYo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-10 14:27:50

Probablemente la mejor manera de hacerlo es combinar un span con una clase que denota su formato y luego usar Jquery .cada uno para hacer el formato en los tramos cuando se carga el DOM...

16

Author: Ross,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-08-06 20:47:49

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

8

Author: mreq,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-12-30 09:06:47

No es una respuesta, pero tal vez de interés. Hace unos años envié una propuesta al Grupo de trabajo de CSS. Sin embargo, no ha pasado nada. Si de hecho ellos (y los proveedores de navegadores) verían esto como una preocupación de desarrollador genuino, tal vez la pelota podría empezar a rodar?

5

Author: itpastorn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-08-14 13:58:11

Si ayuda...

Uso la función PHP number_format() y el Estrecho Espacio sin interrupción ( ). A menudo se utiliza como un separador de miles inequívoco.

echo number_format(200000, 0, "", "&#8239;");

Debido a que IE8 tiene algunos problemas para renderizar el Espacio Estrecho sin interrupción, lo cambié por un SPAN

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

.number SPAN{
    padding: 0 1px; 
}

3

Author: Daniel G. Blázquez,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-26 18:07:35

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

También como Petr mencionó, puede manejarlo en el lado del servidor, pero depende totalmente de su escenario.

2

Author: Qorbani,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:26:07

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

2

Author: Florin Frătică,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-12-30 10:28:04

Puede usar la biblioteca de etiquetas Jstl 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

0

Author: Mohammad Javed,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-16 15:20:05

score 21 · Accepted Answer

Bueno, para cualquier número en Javascript utilizo 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;
}