Định dạng một số làm tiền tệ bằng cách sử dụng CSS

Chỉ cần tự hỏi liệu có ai biết liệu có thể định dạng nội dung của một phần tử làm đơn vị tiền tệ chỉ sử dụng CSS hay không. Nó sẽ được tốt đẹp để có cách trị được trình bày trong CSS nếu có thể, không thể tìm thấy bất cứ điều gì mặc dù vậy tôi không giữ hơi thở của tôi :)Định dạng một số làm tiền tệ bằng cách sử dụng 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>

Đó dụ đi ra như:

CSS tinh khiết: $ 25153,3

lý tưởng định dạng: $ 25,153.30

Cũng tôi biết rằng nó khá tầm thường sử dụng javascript - http://css-tricks.com/snippets/javascript/format-currency/.

Nguồn

2012-02-21 Daniel Imms

Không. Không phải với css thuần túy. – Scott

có thể trùng lặp của http://stackoverflow.com/questions/8677805/formatting-numbers-decimal-places-thousands-separators-etc-with-css – BoltClock

Nếu bạn hỏi về định dạng số trong CSS (nghĩa là, phân tích cú pháp một số từ chuỗi và sau đó định dạng số bằng dấu phân cách hàng nghìn, dấu tách thập phân, số thập phân cố định, v.v.) và đây không phải là CSS được thiết kế cho.

Nếu bạn muốn thực hiện bất kỳ định dạng nào, thì tốt hơn bạn nên sử dụng XSLT. Ví dụ:

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

Nguồn

2012-02-21 05:29:19 penartur

+58

"và đây không phải là CSS được thiết kế cho" ... tôi sẽ dự đoán về CSS được thiết kế cho cái gì. Đẩy chức năng phổ biến vào trình duyệt chính xác là những công nghệ như CSS được thiết kế cho. Có một thời điểm khi "phản hồi kích thước màn hình" là "không phải một cái gì đó CSS được thiết kế cho" Ngoài ra: http://wiki.csswg.org/ideas/content-formatting – umassthrower

aha - vì vậy * đó là * XSLT được thiết kế cho cái gì; -) –

+12

"Định dạng một số" là một chức năng của bản trình bày, và đó là * chính xác * những gì CSS được thiết kế cho. –

Định dạng tiền tệ có thể đạt được bằng CSS và một chút Javascript cần thiết để phân tích số để thêm dấu phẩy. Một lớp CSS thêm kiểu dáng bổ sung như dấu (màu đỏ) hoặc ký hiệu tiền tệ (tức là ký hiệu Đô la Mỹ). Cách tiếp cận được một sau:

1) Chuyển đổi giá trị số (thêm dấu phẩy dựa trên ngôn ngữ)

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

2) Thêm một lớp học để xác định xem nó là giá trị âm hoặc dương tính (tức là màu đỏ màu)

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

Xem chi tiết hơn ở đây với các mẫu mã và css:

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

Nguồn

2015-12-12 15:46:49 ozkary

Không thể ảnh hưởng đến trung bình ngàn người nắm giữ, nhưng trước và sau một số đủ cho mục tiêu ... – davidtaubmann

Vâng, điều này không phù hợp với trường hợp sử dụng của riêng bạn không may, và đó là khá rõ ràng, nhưng bạn có thể làm điều này cho số nguyên từ -999 đến 999.

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

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

Sau đó, một có thể, gây phiền nhiễu, giải pháp nếu bạn đang làm việc phía máy chủ, là để chuyển đổi số của bạn thành một chuỗi đảo ngược và lặp qua mỗi ký tự. Nếu bạn thực sự muốn bạn có thể đặt các ký tự vào li và css sau đó có thể làm các định dạng mà bạn muốn như sau. Tuy nhiên điều này là vô cùng vô nghĩa vì bạn cũng có thể chỉ đơn giản là tác giả chuỗi tại thời điểm đó.

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

Đối với một bổ nhào thậm chí sâu hơn vào nỗ lực vô nghĩa, bạn có thể thêm vào trước một

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

trên <ul>, cho phép script của bạn để thay đổi giá trị thập phân trong CSS, lol

Tuy nhiên, nếu bạn đã hang động và sử dụng JavaScript, thì CSS thực sự có thể hữu ích một chút. Bạn có thể xuất một int đơn hoặc int (bất kỳ độ chính xác nào) và chỉ cần JS chia nó thành <li> s.

Nguồn

2017-11-02 03:41:28

Định dạng một số làm tiền tệ bằng cách sử dụng CSS

Trả lời

Các vấn đề liên quan