Подтвердить что ты не робот

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

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

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

    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, '.', ' ')

Ответ 3

Черт возьми, я почти там!

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 и такими:)

Ответ 4

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

Ответ 5

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

Использование рамки 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; }

Ответ 7

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"

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

Ответ 9

Никакой CSS не манипулирует строками. Sry, вам нужно будет сделать это с помощью JS

Ответ 10

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

Ответ 11

Как насчет числа в два раза: один раз для отображения и один раз для манипуляции следующим образом:

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

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

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

Ответ 12

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