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

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

    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) : "");
    };

Entonces úsalo así:

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

Maldita sea, ya casi estoy allí!!

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 de alguna manera comenzar la división desde la derecha. Ahora experimentando con direction: rtl y tales:)

Si no está dispuesto a usar JavaScript para cambiar el formato, debe cambiar su formato desde el server...ie, antes de renderizar la página.

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

Usando el framework jQuery, $("#myElement").text () devuelve solo el texto (no cualquier html anidado). Así que usted podría hacer esto:

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

Y aplicar algún relleno o margen para hacerlo más legible.

Cuando llamas:

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

Usted obtendría la llanura 1000000 de vuelta.

CSS:

.triad { padding-left: 5px; }

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

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 hace el trabajo.

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

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

¿Qué tal tener el número dos veces: Una para mostrar y otra para manipular de esta manera:

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

Entonces puede usar fácilmente getAttribute('data-value') para obtener el valor de su JS y formatear el número de la manera que desee.

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

Desearía que esto fuera posible con CSS : (no se puede obtener valor del texto y utilizarlo en operaciones posteriores utilizando CSS.

Lo primero que viene a la mente es usar :after y :before con content:" "
Entonces solo necesitas algo que agregue dinámicamente una etiqueta alrededor de los números correctos y le dé estilo.