Форматирование числа в виде валюты с помощью CSS

Просто интересно, знает ли кто-нибудь, можно ли форматировать содержимое элемента как валюты, используя только CSS. Было бы неплохо иметь представление о том, как значение представлено в CSS, если возможно, не может найти ничего, хотя я не задерживаю дыхание:)

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .dollars:before { content:'$'; }
    </style>
</head>
<body>
    Pure CSS: <span class="dollars">25153.3</span>
    <br />
    Ideal format: <span>$25,153.30</span>
</body>
</html>

Этот пример выглядит как:

Чистый CSS: $25153.3

Идеальный формат: $25 153,30

Также я знаю, что это довольно тривиально, используя javascript - http://css-tricks.com/snippets/javascript/format-currency/.

Ответы

Ответ 1

Формат валюты может быть достигнут с помощью CSS и немного Javascript, который необходим для синтаксического разбора номера для добавления запятых. Класс CSS добавляет дополнительный стиль, например, отрицательный (красный) или знак валюты (т.е. Знак доллара США). Подход следующий:

1) Преобразуйте значение в число (добавляет запятую на основе локали)

Number(value).toLocaleString('en');

2) Добавьте класс, чтобы определить, является ли оно отрицательным или положительным (то есть красный цвет)

.enMoney::before {
    content:"$";
}
.negMoney {
    color:red;
}

Подробнее см. пример кода и css:

http://www.ozkary.com/2014/04/format-currency-with-javascript-and-css.html

Ответ 2

Если вы спрашиваете о форматировании чисел в CSS (то есть, разбираете число из строки, а затем форматируете его с разделителем тысяч, десятичным разделителем, фиксированным десятичным числом цифр и т.д.), то нет, это невозможно в CSS, и это не то, для чего был разработан CSS.

Если вы хотите сделать любое форматирование, вам лучше использовать XSLT. Например:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="span[@class='dollars']">
        <span>
            <xsl:text>$</xsl:text>
            <xsl:value-of select="format-number(current(), '###,###.00')"/>
        </span>
    </xsl:template>

    <xsl:template match="@* | node()">
        <xsl:copy>
            <xsl:apply-templates select="@* | node()"/>
        </xsl:copy>
    </xsl:template>
</xsl:stylesheet>

Ответ 3

Ну, к сожалению, это не подходит для вашего собственного использования, и это довольно очевидно, но вы можете сделать это для целых чисел от -999 до 999.

.currency:before{ content:'$'; }
.currency:after{ content: '.00'; }

<span class="currency">789</span>