Formateando un número como moneda usando CSS

Solo me pregunto si alguien sabe si es posible formatear el contenido de un elemento como moneda usando solo CSS. Sería bueno tener cómo se presenta el valor de CSS si es posible, no puede encontrar nada, sin embargo, así que no estoy conteniendo la respiración :)Formateando un número como moneda usando CSS

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     .dollars:before { content:'$'; } 
    </style> 
</head> 
<body> 
    Pure CSS: <span class="dollars">25153.3</span> 
    <br /> 
    Ideal format: <span>$25,153.30</span> 
</body> 
</html>

Ese ejemplo resulta:

CSS puro: $ 25153,3

formato ideal: $ 25,153.30

también soy consciente de que es bastante trivial usando javascript - http://css-tricks.com/snippets/javascript/format-currency/.

Fuente

2012-02-21 Daniel Imms

No. No con css puro – Scott

posible duplicado de http://stackoverflow.com/questions/8677805/formatting-numbers-decimal-places-thousands-separators-etc-with-css – BoltClock

Si está preguntando sobre el formato de número en CSS (es decir, analizar un número de una cadena y formatearlo con separador de miles, separador decimal, número de dígitos decimales fijo, etc.), entonces no, es imposible en CSS , y esto no es para lo que se diseñó CSS.

Si desea hacer cualquier formateo, entonces será mejor que use XSLT. Por ejemplo:

<?xml version="1.0" encoding="ISO-8859-1"?> 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 

    <xsl:template match="span[@class='dollars']"> 
     <span> 
      <xsl:text>$</xsl:text> 
      <xsl:value-of select="format-number(current(), '###,###.00')"/> 
     </span> 
    </xsl:template> 

    <xsl:template match="@* | node()"> 
     <xsl:copy> 
      <xsl:apply-templates select="@* | node()"/> 
     </xsl:copy> 
    </xsl:template> 
</xsl:stylesheet>

Fuente

2012-02-21 05:29:19 penartur

+58

"y esto no es para lo que se diseñó CSS" ... lo haría reserva juicio sobre para qué fue diseñado CSS. Impulsar la funcionalidad común en el navegador es exactamente para lo que se diseñaron las tecnologías como CSS. Hubo un momento en que "responder a los tamaños de pantalla" no era "algo para lo que se diseñó CSS". También: http://wiki.csswg.org/ideas/content-formatting – umassthrower

aha - entonces * eso es * para lo que XSLT fue diseñado; -) –

+12

"Formatear un número" es una función de la presentación, y eso es * exactamente * para lo que se diseñó CSS. –

El formato de moneda se puede lograr con CSS y un poco de Javascript que es necesaria para el análisis del número de añadir las comas. Una clase CSS agrega el estilo adicional como signo negativo (rojo) o de moneda (es decir, $ signo de dólar). El enfoque es como sigue:

1) Convertir el valor de número (suma de las comas en base a la configuración regional)

Number(value).toLocaleString('en');

2) Añadir una clase para determinar si se trata de un valor negativo o positivo (es decir, rojo el color)

.enMoney::before { 
    content:"$"; 
} 
.negMoney { 
    color:red; 
}

Ver más detalle aquí con el código de ejemplo y CSS:

http://www.ozkary.com/2014/04/format-currency-with-javascript-and-css.html

Fuente

2015-12-12 15:46:49 ozkary

No puede afectar a los miles de sepparators intermedios, pero antes y después de un número es suficiente para el objetivo ... – davidtaubmann

Bueno, esto no se ajusta a su propio caso de uso por desgracia, y es bastante obvio, pero se puede hacer esto por números enteros de -999 a 999.

.currency:before{ content:'$'; } 
 
.currency:after{ content: '.00'; }

<span class="currency">789</span>

Entonces, una Una solución posible, molesta, si está trabajando en el lado del servidor, es convertir su número en una secuencia invertida y recorrer cada carácter. Si realmente lo desea, podría colocar los caracteres en li y css podría hacer el formateo que desea de la siguiente manera. Sin embargo, esto es increíblemente inútil ya que también puede simplemente escribir la cadena en ese punto.

.currency li:before{ content: ' ,';} 
 
.currency li:first-child:before{ content:'$' !important; } 
 
.currency *{ display: inline-block; } 
 
.currency, .currency > *{ display: inline-block; } 
 
.currency:after{ content: '.00'; }

<ul class="currency"><li>123</li><li>456</li><li>789</li></ul> 
 
<ul class="currency"><li>456</li><li>789</li></ul> 
 
<ul class="currency"><li>789</li></ul>

Para una inmersión aún más en el esfuerzo inútil, se puede anteponer un

<style> .currency:after{ content: '.00'; } </style>

por encima de la <ul>, permitiendo que la secuencia de comandos para cambiar el valor decimal en CSS, lol

Aún así, si tuviera que descifrar y usar JavaScript, entonces el CSS en realidad podría ser de alguna utilidad. Puede generar un int simple o un double (cualquier precisión) y simplemente hacer que JS lo divida en <li> s.

Fuente

2017-11-02 03:41:28

Formateando un número como moneda usando CSS

Respuesta

Cuestiones relacionadas