CSS를 사용하여 숫자 (소수점, 천 단위 구분 기호 등) 서식 지정

CSS를 사용하여 숫자 (소수점, 천 단위 구분 기호 등) 서식 지정

---

CSS로 숫자를 형식화 할 수 있습니까? 즉 소수점 이하 자릿수, 소수점 구분 기호, 천 단위 구분 기호 등입니다.

---

사용할 수 있습니다 Number.prototype.toLocaleString(). 라틴어, 아랍어 등 다른 숫자 형식으로도 형식을 지정할 수 있습니다.

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

---

CSS 워킹 그룹은 2008 년 에 Draft on Content Formatting 을 발표했습니다. 그러나 지금은 새로운 것이 없습니다.

---

글쎄, 자바 스크립트의 숫자에 대해서는 다음 숫자를 사용합니다.

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

참고URL : https://stackoverflow.com/questions/8677805/formatting-numbers-decimal-places-thousands-separators-etc-with-css