Định dạng số (vị trí thập phân, dấu phân cách hàng nghìn, v.v.) bằng CSS

Có thể định dạng số bằng CSS không? Đó là: chữ số thập phân, dấu phân cách thập phân, dấu phân cách hàng nghìn, v.v.

Bạn có thể 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

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.

Đố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;
}

Có lẽ cách tốt nhất để làm như vậy là kết hợp đặt 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 ...

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

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?

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, "", " ");

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

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. Hãy xem cái 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.

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

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ố định dạng (8): 120E3