Есть ли способ разбить длинные числа («$ 100000000») на более читаемые триады («$ 100 000 000») с помощью CSS?

Question

У меня есть страница с большим количеством значений большого числа. Миллионы и миллиарды долларов уходят повсюду. И эти цифры трудно прочитать, поэтому мой клиент просит меня разбить их на более читаемые куски из трех символов: «$ 100000000» => «$ 100 000 000».

Это вполне разумный запрос, но проблема в том, что я не хочу делать это на стороне сервера, и я не хочу делать это с помощью JavaScript. Видите ли, у меня действительно большая куча javascript, уже запущенная на этой странице, выполняющая сложные вычисления для этих длинных чисел, и будет действительно трудно вставить parseReadableStringToInteger() в каждое место, которое читает данные со страницы, и writeIntegerAsReadableString() в каждом месте, которое записывает результаты обратно на страницу.

Итак, я думаю об использовании CSS для отображения длинных строк в виде набора коротких фрагментов. Моя первая мысль была о -moz-column и -webkit-column, но, к сожалению, они работают только со словами, которые уже разделены пробелом.

Может быть, есть другой способ? Любые предложения приветствуются.

p.s. Кросс-браузерная совместимость не требуется. Я в порядке с Gecko и / или Webkit.

Answer 1

Нет способа сделать это через CSS, но вы можете расширить тип числа следующим образом:

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

тогда используйте это так:

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

Answer 2

Черт, я почти у цели!

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>

дает мне

100 000
100 000 0
100 000 00
100 000 000

Единственное, что осталось, это как-то начать расщепление справа. Сейчас экспериментирую с direction: rtl и такими:)

Answer 3

Если вы не хотите использовать JavaScript для изменения форматирования, вам следует изменить их формат с сервера ... т.е. перед рендерингом страницы.

Answer 4

Тебе придется найти способ JavaScript сделать это, я вполне уверен. Любая техника CSS, даже если бы это было возможно, не была бы кросс-браузерной.

Answer 5

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"

Я уверен, что это можно написать лучше и короче, но это делает работу.

Answer 6

n1313, http://wiki.csswg.org/ideas/content-formatting;) это не решение, просто идея

Answer 7

Вот предложение, которое будет работать, , хотя даже я признаю, что это не очень хорошо ...

Используя каркас jQuery, $ ("# myElement"). Text () возвращает только текст (не вложенный html). Чтобы вы могли сделать это:

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

И применить отступы или отступы, чтобы сделать его более читабельным.

Когда вы тогда звоните:

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

Вы получите 1000000 обратно.

CSS:

.triad { padding-left: 5px; }

Answer 8

Первое, что приходит на ум, это использование :after и :before с content:" "
Тогда вам просто нужно что-то, что динамически добавляет тег вокруг правильных чисел и стилизует его.

Answer 9

Как насчет числа дважды: один раз для отображения и один раз для манипуляций, подобных этому:

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

Затем вы можете легко использовать getAttribute('data-value'), чтобы получить значение из вашего JS и отформатировать число любым удобным вам способом.

data-* атрибуты - это новая функция в HTML 5, но почти все современные браузеры уже поддерживают ее (модуль .dataset в DOM, поэтому вам придется использовать getAttribute() в текущих / старых браузерах).

Answer 10

Хотелось бы, чтобы это было возможно с помощью CSS :( Вы не можете получить текстовое значение и использовать его в последующих операциях с использованием CSS.