Существует ли способ повредить длинные числа (“100 000 000$”) в большее количество читаемых триад (“100 000 000$”) с CSS?
У меня есть страница с большим количеством больших числовых значений. Миллионы и миллиарды долларов, идущих везде. И трудно считать эти числа, таким образом, мой клиент просит, чтобы я повредил их в большее количество читаемых блоков трех символов, "100 000 000$" => "100 000 000$".
Это - абсолютно разумный запрос, но проблема состоит в том, что я не хочу делать это на серверной стороне, и я не хочу делать это с JavaScript. Вы видите, у меня есть действительно большая "куча" JavaScript, уже работающего на этой странице, делая сложные вычисления на этих длинных числах, и будет действительно трудно вставить a parseReadableStringToInteger() в каждом месте, которое считывает данные со страницы и a writeIntegerAsReadableString() в каждом месте, которое записывает результаты обратно к странице.
Так, я думаю об использовании CSS, чтобы заставить длинную строку отобразиться как ряд коротких блоков. Моя первая мысль имела -moz-column и -webkit-column, но к сожалению, они работают только со словами, которые уже разделяются пространством.
Возможно, существует иначе? Любые предложения приветствуются.
p.s. Перекрестная совместимость браузера не требуется. Я соглашаюсь с Гекконом и/или WebKit.
11 ответов
Вам нужно будет найти способ сделать это с помощью JavaScript, я ' м довольно уверен. Любой метод CSS, даже если бы он был возможен, не был бы кроссбраузерным.
Хотелось бы, чтобы это было возможно с помощью CSS :( вы не можете получить текстовое значение и использовать его в последующих операциях с помощью CSS.
Нет способа сделать это через 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, '.', ' ')
Черт побери, я почти у цели !!
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 и так далее :)
Если вы не желаете использовать JavaScript для изменения форматирования, вам следует изменить их формат с сервера... т.е. перед рендерингом страницы.
Вот предложение, которое сработает, хотя даже я признаю, что оно не очень хорошее ...
Использование фреймворк 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; }
Я нашел этот кусок javascript, который может помочь вам, если вы собираетесь делать это на стороне клиента: http://homepage.mac.com/ruske/ruske/C2127905073/E844527267/Media/FormatInteger.js
Как насчет того, чтобы иметь число дважды: один раз для отображения и один раз для манипуляций, как это:
<span class="money" data-value="1000000">$ 1 000 000</span>
Тогда вы можете легко использовать getAttribute('data-value'), чтобы получить значение из вашего JS и отформатировать число так, как вы хотите.
data-* атрибуты - это новая возможность в HTML 5, но практически все современные браузеры уже поддерживают ее (модулируют свойство .dataset в DOM, поэтому вам придется использовать getAttribute() в современных/старых браузерах).
Первое, что приходит в голову, это использование : after и : before с содержанием : ""
Тогда вам просто нужно что-то, что динамически добавляет теги вокруг нужных чисел и стилизует их.
Никакой CSS не управляет строками. Извините, вам придется сделать это с помощью JS
n1313, http://wiki.csswg.org/ideas/content-formatting ;) это не решение, просто идея