Question

只是想知道是否有人知道是否可以仅使用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/相当简单。

Answer 1

货币格式可以通过CSS和一些Javascript来实现，这是解析数字以添加逗号所需的。 CSS类添加额外的样式，如负（红色）或货币符号（即$ Dollar sign）。方法如下：

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

Answer 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>

Answer 3

active: true,

Answer 4

嗯，遗憾的是，这并不适合您自己的用例，而且相当明显，但您可以对-999到999之间的整数进行此操作。

＆＃13;

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

＆＃13;

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

＆＃13;

然后，如果您正在使用服务器端，那么可能的，烦人的解决方案是将您的号码转换为反向字符串并循环遍历每个字符。如果你真的想要你可以将字符放入li和css然后css可以按照以下方式进行你想要的格式化。然而，这是非常无意义的，因为你可能只是在那时简单地创作字符串。

＆＃13;

.currency li:before{ content: ' ,';}
.currency li:first-child:before{ content:'$' !important; }
.currency *{ display: inline-block; }
.currency, .currency > *{ display: inline-block; }
.currency:after{ content: '.00'; }

＆＃13;

<ul class="currency"><li>123</li><li>456</li><li>789</li></ul> 
<ul class="currency"><li>456</li><li>789</li></ul> 
<ul class="currency"><li>789</li></ul>

＆＃13;

为了更深入地研究无意义的努力，你可以预先添加

<style> .currency:after{ content: '.00'; } </style>

在<ul>之上，允许你的脚本更改CSS中的小数值，lol

尽管如此，如果你要使用JavaScript并使用JavaScript，那么CSS可能实际上有些用处。你可以输出一个普通的int或double（任何精度），只需让JS把它分成<li> s。

使用CSS将数字格式化为货币

4 个答案: