CSSによる数値（小数点以下の桁数、桁区切り記号など）のフォーマット

CSSで数値をフォーマットすることは可能ですか？つまり、小数点以下の桁数、小数点記号、桁区切り記号などです。

使用できますNumber.prototype.toLocaleString()。また、ラテン語、アラビア語など、他の数値形式用にフォーマットすることもできます。

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

CSSワーキンググループは、2008年にコンテンツフォーマットに関するドラフトを公開しました。しかし、現在、新しいことは何もありません。

さて、JavaScriptの数値については、次の数値を使用します。

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();

たとえば、他の区切り文字をカンマとして使用する必要がある場合：

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

または関数として：

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

おそらく、これを行うための最良の方法は、書式設定を示すクラスでスパンを設定し、次にJquery .eachを使用して、DOMが読み込まれたときにスパンで書式設定を行うことです...

いいえ、DOMに入ったらJavaScriptを使用するか、言語サーバー側（PHP / ruby​​ / pythonなど）でフォーマットする必要があります。

答えではなく、興味のあるパーパス。私は数年前にCSS WGに提案を送りました。しかし、何も起こりませんでした。確かに彼ら（そしてブラウザベンダー）がこれを本物の開発者の懸念であると考えるなら、おそらくボールは転がり始めるかもしれませんか？

それが役立つ場合...

私はPHP関数number_format()と狭いノーブレークスペース（ ）を使用しています。多くの場合、明確な3桁区切り記号として使用されます。

echo number_format(200000, 0, "", " ");

IE8は狭いノーブレークスペースをレンダリングするためにいくつかの問題があるため、SPANに変更しました

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

.number SPAN{
    padding: 0 1px; 
}

この目的でCSSを使用することはできません。該当する場合は、JavaScriptの使用をお勧めします。詳細については、こちらをご覧ください。。printf/ string.formatと同等のJavaScript

また、Petrが言及したように、サーバー側でそれを処理できますが、それは完全にシナリオに依存します。

できないと思います。PHPでコーディングしている場合は、number_format（）を使用できます。また、他のプログラミング言語には、数値をフォーマットする機能もあります。

Jstlタグライブラリを使用して、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>

結果

書式設定された番号（1）：£120,000.23

書式設定された数値（2）：000.231

書式設定された番号（3）：120,000.231

書式設定された番号（4）：120000.231

書式設定された数値（5）：023％

書式設定された数値（6）：12,000,023.0900000000％

書式設定された数値（7）：023％

書式設定された番号（8）：120E3