Hướng dẫn format number css

Question

answer

23

Thật không may, hiện tại nó không khả dụng với CSS, nhưng bạn có thể sử dụng Number.prototype.toLocaleString(). Nó cũng có thể định dạng cho các định dạng số khác, ví dụ: latin, arabic, v.v.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

23 hữu ích 1 bình luận chia sẻ

answer

28

Nhóm làm việc CSS đã xuất bản Dự thảo về Định dạng Nội dung vào năm 2008. Nhưng hiện tại vẫn chưa có gì mới.

28 hữu ích 0 bình luận chia sẻ

answer

24

Đối với bất kỳ số nào trong Javascript, tôi sử dụng số tiếp theo:

var a = "1222333444555666777888999";
a = a.replace(new RegExp("^(\\d{" + (a.length%3?a.length%3:0) + "})(\\d{3})", "g"), "$1 $2").replace(/(\d{3})+?/gi, "$1 ").trim();

và nếu bạn cần sử dụng bất kỳ dấu phân tách nào khác dưới dạng dấu phẩy, ví dụ:

var sep = ",";
a = a.replace(/\s/g, sep);

hoặc như một chức năng:

function numberFormat(_number, _sep) {
    _number = typeof _number != "undefined" && _number > 0 ? _number : "";
    _number = _number.replace(new RegExp("^(\\d{" + (_number.length%3? _number.length%3:0) + "})(\\d{3})", "g"), "$1 $2").replace(/(\d{3})+?/gi, "$1 ").trim();
    if(typeof _sep != "undefined" && _sep != " ") {
        _number = _number.replace(/\s/g, _sep);
    }
    return _number;
}

24 hữu ích 4 bình luận chia sẻ

answer

15

Có lẽ cách tốt nhất để làm như vậy là kết hợp thiết lập một khoảng với một lớp biểu thị định dạng của bạn, sau đó sử dụng Jquery .each để thực hiện định dạng trên các khoảng khi DOM được tải ...

15 hữu ích 0 bình luận chia sẻ

answer

9

Không, bạn phải sử dụng javascript khi nó ở trong DOM hoặc định dạng nó qua phía máy chủ ngôn ngữ của bạn (PHP / ruby / python, v.v.)

9 hữu ích 3 bình luận chia sẻ

answer

6

Không phải là một câu trả lời, nhưng perhpas quan tâm. Tôi đã gửi một đề xuất đến CSS WG một vài năm trước. Tuy nhiên, vẫn chưa có gì xảy ra. Nếu thực sự họ (và các nhà cung cấp trình duyệt) sẽ coi đây là mối quan tâm thực sự của nhà phát triển, có lẽ quả bóng có thể bắt đầu lăn?

6 hữu ích 1 bình luận chia sẻ

answer

6

Nếu nó giúp ...

Tôi sử dụng hàm PHP number_format()và Dấu cách hẹp không ngắt (  ). Nó thường được sử dụng như một dấu phân cách hàng nghìn rõ ràng.

echo number_format(200000, 0, "", "&#8239;");

Vì IE8 gặp một số vấn đề để hiển thị Không gian ngắt quãng hẹp, tôi đã thay đổi nó thành SPAN

echo "<span class='number'>".number_format(200000, 0, "", "<span></span>")."</span>";

.number SPAN{
    padding: 0 1px; 
}

6 hữu ích 1 bình luận chia sẻ

answer

3

Tôi không nghĩ bạn có thể. Bạn có thể sử dụng number_format () nếu bạn đang viết mã bằng PHP. Và các ngôn ngữ lập trình khác cũng có chức năng định dạng số.

3 hữu ích 1 bình luận chia sẻ

answer

2

Bạn không thể sử dụng CSS cho mục đích này. Tôi khuyên bạn nên sử dụng JavaScript nếu nó có thể áp dụng được. Hãy xem phần này để biết thêm thông tin: JavaScript tương đương với printf / string.format

Cũng như Petr đã đề cập, bạn có thể xử lý nó ở phía máy chủ nhưng nó hoàn toàn phụ thuộc vào tình huống của bạn.

2 hữu ích 0 bình luận chia sẻ

answer

1

Bạn có thể sử dụng Thư viện thẻ Jstl để định dạng cho các Trang JSP

JSP Page
//import the jstl lib
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %>

<c:set var="balance" value="120000.2309" />
<p>Formatted Number (1): <fmt:formatNumber value="${balance}" 
        type="currency"/></p>
<p>Formatted Number (2): <fmt:formatNumber type="number" 
        maxIntegerDigits="3" value="${balance}" /></p>
<p>Formatted Number (3): <fmt:formatNumber type="number" 
        maxFractionDigits="3" value="${balance}" /></p>
<p>Formatted Number (4): <fmt:formatNumber type="number" 
        groupingUsed="false" value="${balance}" /></p>
<p>Formatted Number (5): <fmt:formatNumber type="percent" 
        maxIntegerDigits="3" value="${balance}" /></p>
<p>Formatted Number (6): <fmt:formatNumber type="percent" 
        minFractionDigits="10" value="${balance}" /></p>
<p>Formatted Number (7): <fmt:formatNumber type="percent" 
        maxIntegerDigits="3" value="${balance}" /></p>
<p>Formatted Number (8): <fmt:formatNumber type="number" 
        pattern="###.###E0" value="${balance}" /></p>

Kết quả

Số được định dạng (1): £ 120.000,23

Số được định dạng (2): 000.231

Số được định dạng (3): 120.000.231

Số được định dạng (4): 120000.231

Số được định dạng (5): 023%

Số được định dạng (6): 12.000,023.0900000000%

Số được định dạng (7): 023%

Số được định dạng (8): 120E3

1 hữu ích 0 bình luận chia sẻ

answer

1

Một giải pháp khác với CSS + HTML thuần túy và lớp giả :lang().

Sử dụng một số HTML để đánh dấu số với các lớp thousands-separatorvà decimal-separator:

<html lang="es">
  Spanish: 1<span class="thousands-separator">200</span><span class="thousands-separator">000</span><span class="decimal-separator">.</span>50
</html>

Sử dụng lớp langgiả để định dạng số.

/* Spanish */
.thousands-separator:lang(es):before{
  content: ".";
}
.decimal-separator:lang(es){
  visibility: hidden;
  position: relative;
}
.decimal-separator:lang(es):before{
  position: absolute;
  visibility: visible;
  content: ",";
}

/* English and Mexican Spanish */
.thousands-separator:lang(en):before, .thousands-separator:lang(es-MX):before{
  content: ",";
}

Codepen: https://codepen.io/danielblazquez/pen/qBqVjGy

1 hữu ích 0 bình luận chia sẻ