Можно ли форматировать числа с помощью CSS? То есть: десятичные знаки, десятичный разделитель, разделитель тысяч и т. д.
Форматирование чисел (десятичные разряды, разделители тысяч и т. д.) с помощью CSS
Ответы (11)
К сожалению, в настоящее время это невозможно с помощью CSS, но вы можете использовать Number.prototype.toLocaleString()
. Он также может форматировать для других числовых форматов, например. латинский, арабский и т.
Рабочая группа CSS опубликовала черновик по форматированию контента в 2008 году. Но сейчас ничего нового.
Что ж, для любых чисел в 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;
}
_number.replace
мы должны убедиться, что это строка, подобная этой _number = typeof _number != "undefined" && _number > 0 ? String(_number) : "";
, иначе вы получите сообщение об ошибке _number.replace
не определено или не является функцией
- person Shalkam; 01.07.2017
Вероятно, лучший способ сделать это - это комбинация установки диапазона с классом, обозначающим ваше форматирование, а затем использование Jquery .each для форматирования диапазонов при загрузке DOM...
Нет, вы должны использовать javascript, как только он появится в DOM, или отформатировать его на стороне вашего языка (PHP/ рубин/питон и т. д.)
rtl
, который показывает один и тот же контент по-другому: должен ли он также обрабатываться на стороне сервера?
- person Don; 01.02.2018
Не ответ, но, возможно, интересно. Несколько лет назад я отправил предложение в рабочую группу CSS. Однако ничего не произошло. Если они (и поставщики браузеров) действительно увидят в этом серьезную проблему для разработчиков, может быть, дело сдвинется с мертвой точки?
Если это поможет...
Я использую функцию 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;
}
Я не думаю, что вы можете. Вы можете использовать number_format(), если вы пишете код на PHP. И в других языках программирования тоже есть функция форматирования чисел.
Вы не можете использовать CSS для этой цели. Я рекомендую использовать JavaScript, если он применим. Взгляните на это для получения дополнительной информации: JavaScript-эквивалент printf/string.format
Также, как упомянул Петр, вы можете справиться с этим на стороне сервера, но это полностью зависит от вашего сценария.
Вы можете использовать библиотеку тегов 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
Еще одно решение с чистым CSS+HTML и псевдоклассом :lang()
.
Используйте немного HTML, чтобы разметить число классами thousands-separator
и decimal-separator
:
<html lang="es">
Spanish: 1<span class="thousands-separator">200</span><span class="thousands-separator">000</span><span class="decimal-separator">.</span>50
</html>
Используйте псевдокласс lang
для форматирования числа.
/* Spanish */
.thousands-separator:lang(es):before{
content: ".";
}
.decimal-separator:lang(es){
visibility: hidden;
position: relative;
}
.decimal-separator:lang(es):before{
position: absolute;
visibility: visible;
content: ",";
}
/* English and Mexican Spanish */
.thousands-separator:lang(en):before, .thousands-separator:lang(es-MX):before{
content: ",";
}
Codepen: https://codepen.io/danielblazquez/pen/qBqVjGy