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에 있으면 자바 스크립트 를 사용 하거나 언어 서버 측 (PHP / ruby ​​/ python 등)을 통해 형식을 지정해야합니다.

대답은 아니지만 관심있는 perhpas. 몇 년 전에 CSS WG에 제안서를 보냈 습니다 . 그러나 아무 일도 일어나지 않았습니다. 실제로 그들 (및 브라우저 공급 업체)이 이것이 진정한 개발자 문제라고 생각한다면 공이 굴러 갈 수 있을까요?

도움이된다면 ...

PHP 함수 number_format()와 Narrow No-break Space (  )를 사용합니다. 종종 명확한 천 단위 구분 기호로 사용됩니다.

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

IE8에는 Narrow No-break Space를 렌더링하는 데 몇 가지 문제가 있기 때문에 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 ()을 사용할 수 있습니다 . 그리고 다른 프로그래밍 언어에는 숫자 서식 지정 기능도 있습니다.

JSP 페이지의 형식화에 Jstl 태그 라이브러리를 사용할 수 있습니다.

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