javascript - style - translate css animation

¿Hay alguna forma de dividir números largos("$ 100000000") en tríadas más legibles("$ 100 000 000") con CSS?

Question

Tengo una página con muchos valores numéricos grandes. Millones y billones de dólares van a todas partes. Y es difícil leer estos números, por lo que mi cliente me pide que los rompa en trozos más legibles de tres símbolos, "$ 100000000" => "$ 100 000 000".

Esta es una solicitud completamente razonable, pero el problema es que no quiero hacer esto en el servidor, y no quiero hacer esto con javascript. Verá, tengo una gran cantidad de javascript que ya se está ejecutando en esta página, haciendo cálculos complejos en estos números largos, y será muy difícil insertar un parseReadableStringToInteger() en cada lugar que lea datos de la página y un writeIntegerAsReadableString() en cada lugar que escribe resultados de vuelta a la página.

Por lo tanto, estoy pensando en usar CSS para hacer una visualización de cadena larga como un conjunto de trozos cortos. Mi primer pensamiento fue de -moz-column y -webkit-column , pero desafortunadamente, funcionan solo con palabras que ya están separadas por espacio.

Tal vez hay otra manera? Cualquier sugerencia es bienvenida.

ps La compatibilidad entre navegadores no es necesaria. Estoy bien con Gecko y / o Webkit.

Answer 1

¡Maldita sea, ya casi estoy ahí!

span { display: block; -moz-column-gap:5px; -moz-column-width:24px; word-wrap:break-word; } <span>100000</span> <span>1000000</span> <span>10000000</span> <span>100000000</span>

me da

100 000 100 000 0 100 000 00 100 000 000

Lo único que queda es comenzar de alguna manera la división desde la derecha. Ahora experimentando con la direction: rtl y tal :)

Answer 2

¿Qué tal tener el número dos veces: una vez para mostrar y una para manipulación como esta:

<span class="money" data-value="1000000">$ 1 000 000</span>

Luego puede usar getAttribute(''data-value'') para obtener el valor de su JS y formatear el número de la forma que desee.

data-* atributos data-* son una característica nueva en HTML 5, pero prácticamente todos los navegadores actuales ya lo admiten (modulu la propiedad .dataset en el DOM, por lo que deberá usar getAttribute() en los navegadores actuales / anteriores).

Answer 3

Aquí hay una sugerencia que funcionaría, aunque incluso admitiré que no es muy agradable ...

Usando el marco jQuery, $ ("# myElement"). Text () devuelve solo el texto (no cualquier html anidado). Entonces podrías hacer esto:

<p>$<span id="myElement"><span class="triad">1</span><span class="triad">000</span><span class="triad">000</span></p>

Y aplique algo de relleno o margen para hacerlo más legible.

Cuando llamas:

$("#myElement").text();

Podrías recuperar el 1000000 normal.

CSS:

.triad { padding-left: 5px; }

Answer 4

Encontré esta pieza de javascript que podría ayudarte si vas a hacerlo desde el lado del cliente: http://homepage.mac.com/ruske/ruske/C2127905073/E844527267/Media/FormatInteger.js

Answer 5

Lo primero que se me ocurre es usar :after y :before with content:" "
Entonces solo necesitas algo que agregue dinámicamente una etiqueta alrededor de los números correctos y darle un estilo.

Answer 6

Me gustaría que esto fuera posible con CSS :( no se puede obtener el valor del texto y usarlo en operaciones posteriores usando CSS.

Answer 7

Ningún CSS manipula cadenas. Sry, tendrás que hacerlo con JS

Answer 8

No hay forma de hacerlo a través de CSS, pero puede extender el tipo de número así:

    Number.prototype.formatMoney = function(c, d, t){
    var n = this, c = isNaN(c = Math.abs(c)) ? 2 : c, d = d == undefined ? "," : d, t = t == undefined ? "." : t, s = n < 0 ? "-" : "", i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
       return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(/d{3})(?=/d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
    };

luego úsalo así:

var count = 10000000;
count.formatMoney(2, ''.'', '' '')

Answer 9

Si no está dispuesto a usar JavaScript para cambiar el formato, debe cambiar su formato del servidor ... es decir, antes de mostrar la página.

Answer 10

Vas a tener que encontrar una forma de JavaScript para hacer esto, estoy bastante seguro. Cualquier técnica de CSS, incluso si fuera posible, no sería un navegador cruzado.

Answer 11

n1313, http://wiki.csswg.org/ideas/content-formatting ;) no es una solución, solo idea

Answer 12

function largeNumberToReadableNumber(number){
  var str = Math.floor(amount)+""; //make the integer a string
  var sub = str.substring(str.length-3, str.length); //the last three characters
  newstr = " "+sub;
  var i = 1;
  while (sub.length >= 3){
    sub = str.substring(str.length-((i+1)*3),str.length-(i*3)); //next three characters
    newstr = sub + " " + newstr; //append the characters
    i+=1;
  }
  return newstr;
}

largeNumberToReadable(120312381124124); //will output " 120 312 381 124  124"

Estoy seguro de que esto se puede escribir mejor y más corto, pero cumple su función.