Existe-t-il un moyen de décomposer des nombres longs ("100000000 $") en triades plus lisibles ("100 000 000 $") avec CSS?

Question

J'ai une page avec beaucoup de grand nombre de valeurs. Des Millions et des milliards de dollars de partout. Et il est difficile de lire ces nombres, de sorte que mon client me demande de les casser en plus lisible des morceaux de trois symboles, "$100000000" => "$100 000 000".

C'est tout à fait raisonnable, mais le problème est que je ne veux pas le faire sur le côté serveur, et je ne veux pas le faire avec javascript. Vous voyez, j'ai vraiment un gros tas de javascript déjà en cours d'exécution sur cette page, faire des calculs complexes sur ces numéros, et il sera vraiment difficile d'y insérer une parseReadableStringToInteger() dans tous les lieux qui lit les données à partir de la page et un writeIntegerAsReadableString() dans tous les lieux qui écrit les résultats de la page.

Donc, je pense à l'aide de CSS pour faire de longues affichage de chaîne comme un ensemble de courts morceaux. Ma première pensée a été de -moz-column et -webkit-column, mais malheureusement, ils travaillent uniquement avec des mots qui sont déjà séparés par un espace.

Peut-être il ya une autre façon? Toutes les suggestions sont les bienvenues.

p.s. Compatibilité inter-navigateur n'est pas nécessaire. Je suis ok avec Gecko et/ou Webkit.

Answer 1

Il n'y a aucun moyen de le faire via CSS, mais vous pouvez étendre le type de numéro comme ceci:

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

puis utilisez-le comme ceci:

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

Answer 2

Bon sang, j'y suis presque !!

envergure {
    bloc de visualisation;
    -moz-colonne-gap: 5px;
    -moz-colonne-largeur: 24px;
    word-wrap: mot-pause;
}

<span> 100000 </ span>
<span> 1000000 </ span>
<span> 10000000 </ span>
<span> 100000000 </ span>

Donne moi

100 000
100 000 0
100 000 00
100 000 000

La seule chose qui reste est en quelque sorte de commencer la scission de la droite. Maintenant expérimenter avec direction: rtl et autres :)

Answer 3

Il va falloir que vous trouviez un moyen JavaScript pour faire cela, j'en suis certain. Toute technique CSS, même si cela était possible, ne serait pas cross-browser.

Answer 4

Si vous ne souhaitez pas utiliser JavaScript pour modifier le formatage, vous devez modifier leur format depuis le serveur ... c'est-à-dire avant le rendu de la page.

Answer 5

Voici une suggestion qui fonctionnerait, même si je dois admettre que ce n'est pas très gentil ...

En utilisant le framework jQuery, $ ("# myElement"). Text () renvoie uniquement le texte (pas le code HTML imbriqué). Pour que vous puissiez faire ceci:

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

Et appliquez un peu de remplissage ou de marge pour le rendre plus lisible.

Quand vous appelez ensuite:

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

Vous obtiendrez la simple 1000000 en arrière.

CSS:

 .triad { padding-left: 5px; }