Форматирование чисел (десятичных знаков, разделителей тысяч и т. Д.) С помощью CSS

Question

Возможно ли форматировать числа с помощью CSS?То есть: десятичные разряды, десятичный разделитель, разделитель тысяч и т. Д.

Answer 1

Рабочая группа CSS опубликовала черновик Форматирование контента в 2008 году. Но сейчас ничего нового.

Answer 2

Ну, для любых чисел в Javascript я использую следующее:

var a = "1222333444555666777888999";
a = a.replace(new RegExp("^(\\d{" + (a.length%3?a.length%3:0) + "})(\\d{3})", "g"), "$1 $2").replace(/(\d{3})+?/gi, "$1 ").trim();

и если вам нужно использовать любой другой разделитель в качестве запятой, например:

var sep = ",";
a = a.replace(/\s/g, sep);

или как функция:

function numberFormat(_number, _sep) {
    _number = typeof _number != "undefined" && _number > 0 ? _number : "";
    _number = _number.replace(new RegExp("^(\\d{" + (_number.length%3? _number.length%3:0) + "})(\\d{3})", "g"), "$1 $2").replace(/(\d{3})+?/gi, "$1 ").trim();
    if(typeof _sep != "undefined" && _sep != " ") {
        _number = _number.replace(/\s/g, _sep);
    }
    return _number;
}

Answer 3

Вероятно, лучший способ сделать это - комбинировать установку диапазона с классом, обозначающим ваше форматирование, а затем использовать Jquery .each для форматирования диапазонов при загрузке DOM ...

Answer 4

Нет, вы должны использовать javascript , как только он окажется в DOM, или отформатировать его через серверную часть вашего языка (PHP / ruby ​​/ python и т. Д.)

Answer 5

Вы можете использовать Number.prototype.toLocaleString(). Он также может форматировать для других числовых форматов, например, латинский, арабский и др.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

Answer 6

Не ответ, но perhpas интереса.Я отправил предложение в CSS WG несколько лет назад.Однако ничего не произошло.Если бы они (и поставщики браузеров) действительно воспринимали это как серьезную проблему для разработчиков, возможно, мяч мог бы начаться?

Answer 7

Если это поможет ...

Я использую функцию PHP number_format() и Узкий пробел без перерывов ( ).Он часто используется как однозначный разделитель тысяч.

echo number_format(200000, 0, "", " ");

Поскольку IE8 имеет некоторые проблемы с визуализацией узкого пространства без перерывов, я изменил его на SPAN

echo "<span class='number'>".number_format(200000, 0, "", "<span></span>")."</span>";

.number SPAN{
    padding: 0 1px; 
}

Answer 8

Не думаю, что ты можешь. Вы можете использовать number_format () , если вы пишете в PHP. И другие языки программирования также имеют функцию форматирования чисел.

Answer 9

Вы не можете использовать CSS для этой цели. Я рекомендую использовать JavaScript, если это применимо. Посмотрите на это для получения дополнительной информации: JavaScript эквивалентен printf / string.format

Также, как упоминал Петр, вы можете справиться с этим на стороне сервера, но это полностью зависит от вашего сценария.

Answer 10

Вы можете использовать библиотеку тегов Jstl для форматирования страниц JSP.

JSP Page
//import the jstl lib
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %>

<c:set var="balance" value="120000.2309" />
<p>Formatted Number (1): <fmt:formatNumber value="${balance}" 
        type="currency"/></p>
<p>Formatted Number (2): <fmt:formatNumber type="number" 
        maxIntegerDigits="3" value="${balance}" /></p>
<p>Formatted Number (3): <fmt:formatNumber type="number" 
        maxFractionDigits="3" value="${balance}" /></p>
<p>Formatted Number (4): <fmt:formatNumber type="number" 
        groupingUsed="false" value="${balance}" /></p>
<p>Formatted Number (5): <fmt:formatNumber type="percent" 
        maxIntegerDigits="3" value="${balance}" /></p>
<p>Formatted Number (6): <fmt:formatNumber type="percent" 
        minFractionDigits="10" value="${balance}" /></p>
<p>Formatted Number (7): <fmt:formatNumber type="percent" 
        maxIntegerDigits="3" value="${balance}" /></p>
<p>Formatted Number (8): <fmt:formatNumber type="number" 
        pattern="###.###E0" value="${balance}" /></p>

Результат

Форматированный номер (1): £ 120 000.23

Форматированный номер (2):000.231

Форматированный номер (3): 120 000.231

Форматированный номер (4): 120000.231

Форматированный номер (5): 023%

Форматированный номер (6): 12 000 023,0900000000%

Форматированный номер (7): 023%

Форматированный номер (8): 120E3