CSS kullanarak bir sayıyı para birimi olarak biçimlendirme

Sadece, bir öğenin içeriğini yalnızca CSS kullanarak para biriminin biçiminde biçimlendirmenin mümkün olup olmadığını bilip bilmemek.CSS kullanarak bir sayıyı para birimi olarak biçimlendirme

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

örnek olarak çıkıyor Ben nefesimi :) tutmuyorum bu yüzden de, bir şey bulamıyorum mümkünse değer CSS sunulmuştur nasıl olması güzel olurdu Saf CSS: $ 25153,3

ideal formatı: $ 25,153.30

Ayrıca ben javascript kullanarak oldukça önemsiz farkındayım - http://css-tricks.com/snippets/javascript/format-currency/.

kaynak

2012-02-21 Daniel Imms

Nope. Saf css ile değil. – Scott

http://stackoverflow.com/questions/8677805/formatting-numbers-decimal-places-thousands-separators-etc-with-css – BoltClock

CSS'de sayı biçimlendirmesi hakkında soru soruyorsanız (yani, bir dizeden bir sayı ayrıştırmak ve ardından binlerce ayırıcı, ondalık ayırıcı, ondalık basamak sayısı ile biçimlendirmek vb.) Soruyorsanız, CSS'de bu mümkün değildir. ve bu CSS'nin tasarlandığı şey değil.

Biçimlendirme yapmak isterseniz, XSLT'yi kullanmanız daha iyi olur. Örneğin:

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

kaynak

2012-02-21 05:29:19 penartur

+58

'un olası kopyası "ve CSS bunun için tasarlandığı şey değil" ... CSS'nin ne için tasarlandığı hakkında karar vermek. Ortak işlevselliği tarayıcıya aktarmak, CSS gibi teknolojilerin tasarlandığı şeydir. "Ekran boyutlarına yanıt verme" nin "CSS'nin tasarlandığı bir şey olmadığı" bir zaman vardı: http://wiki.csswg.org/ideas/content-formatting – umassthrower

aha - yani * bu, XSLT'nin ne için tasarlandığını; -) –

+12

"Bir numara biçimlendirmek", sunumun bir işlevidir ve bu tam olarak * CSS'nin ne için tasarlandığıdır. –

para birimi biçimi CSS ve virgül eklemek için sayının ayrıştırma için gerekli olan Javascript biraz sağlanabilir. Bir CSS sınıfı, ek stil gibi negatif (kırmızı) veya para birimi işareti (örn. Dolar işareti) ekler. yaklaşım aşağıda sunulmuştur:

1) sayısı (değer dönüştürme yerel ayar dayalı virgül)

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

2) Eğer öyleyse negatif veya pozitif değerini belirlemek için bir sınıf ekleme ekler (yani kırmızı renk)

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

örnek koda ve css ile burada daha fazla ayrıntıyı görün:

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

kaynak

2015-12-12 15:46:49 ozkary

Orta bin sepparatörlerini etkilemez, ancak bir sayıdan önce ve sonra hedef için yeterlidir ... – davidtaubmann

Eh, bu ne yazık ki kendi kullanım durumunda uymuyor ve oldukça açıktır, ama sonra bir -999 ila 999.

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

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

için tamsayı numaraları için bu yapabilirdi sunucu tarafında çalışıyorsanız mümkün, can sıkıcı, çözüm, numaranızı ters çevrilmiş bir dizgeye dönüştürmek ve her karakterin üzerine döngü yapmaktır. Eğer gerçekten istediyseniz, karakterleri li's'e yerleştirebilirdiniz ve css istediğiniz gibi biçimlendirmeyi yapabilir. Ancak bu, bu noktada dizgeyi kolayca yazabildiğiniz için inanılmaz derecede anlamsızdır.

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

anlamsız bir çaba içine daha derin bir dalış için

, sen

lol, <ul> üzerinde

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

başa ekleyerek CSS'deki ondalık değerini değiştirmek için komut izin verebilir

Yine de, eğer JavaScript'i mağara ve kullanacak olursanız, CSS aslında biraz yararlı olabilir. Basit bir int veya double (herhangi bir hassasiyet) verebilir ve JS'yi <li> s'ye bölebilirsiniz.

kaynak

2017-11-02 03:41:28

CSS kullanarak bir sayıyı para birimi olarak biçimlendirme

cevap

İlgili konular