將數字格式化爲使用CSS的貨幣

想知道是否有人知道是否可以將元素的內容格式化爲僅使用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/。

來源

2012-02-21 Daniel Imms

沒有。不是純粹的CSS。 – Scott 2012-02-21 05:29:12

http://stackoverflow.com/questions/8677805/formatting-numbers-decimal-places-thousands-separators-etc-with-css – BoltClock 2012-02-21 05:34:20

如果你在問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>

來源

2012-02-21 05:29:19 penartur

+58

可能的重複「，這不是什麼CSS設計的」...我會保留關於CSS設計的判斷。將常見功能推入瀏覽器正是CSS所設計的技術。曾經有一段時間，「響應屏幕尺寸」是「不是CSS設計的」。另外：http://wiki.csswg.org/ideas/content-formatting – umassthrower 2013-03-19 22:41:21

aha - 所以*這是* XSLT的設計目的; - ） – 2015-02-10 09:21:00

+12

「格式化數字」是演示文稿的一個功能，這正是* CSS設計的目的。 – 2016-02-12 17:37:32

貨幣格式可以與CSS和一個位的Javascript這是需要的數量的解析添加逗號來實現。一個CSS類添加了額外的樣式，如負面（紅色）或貨幣符號（即$美元符號）。該方法是一個如下所示：

1）轉換的值以數字（相加）

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

2基於該區域設置的逗號）添加一個類，以確定它是否是負的或正的值（即紅色色）

3210

查看更多細節在這裏與樣本代碼和CSS：

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

來源

2015-12-12 15:46:49 ozkary

不能影響中間的千個分隔符，但是在數字之前和之後都足以實現目標... – davidtaubmann 2016-12-17 23:37:15

嗯，這並不遺憾的是合適自己的使用情況下，這是相當明顯的，但你可以爲整數做到這一點從-999到999

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

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

然後，如果你在服務器端工作，可能的，煩人的解決方案是將你的號碼轉換爲反轉字符串並循環遍歷每個字符。如果你真的想要，你可以將字符放入li和css中，然後按照以下方法進行格式設置。然而，這是非常沒有意義的，因爲你可能只是在那個時候編寫字符串。

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

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

對於更深潛入無謂的努力，你可以在前面加上一個

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

的<ul>以上，讓你的腳本在CSS改變十進制值，笑

儘管如此，如果您想要使用JavaScript，那麼CSS實際上可能會有所幫助。你可以輸出一個簡單的int或者double（任何精度），並且讓JS把它分解成<li>s。

來源

2017-11-02 03:41:28

將數字格式化爲使用CSS的貨幣

回答

相關問題