CSS를 사용한 서식 번호(소수점, 수천 개의 구분자, 현지화 등)
CSS로 숫자를 포맷하는 것이 가능합니까?즉, 소수점 자리, 소수점 구분자, 수천 구분자 등입니다.
유감스럽게도 CSS로는 현재 불가능하지만, 사용이 가능합니다.Number.prototype.toLocaleString() 라틴어,등과 형식의 또한 라틴어, 아랍어 등과 같은 다른 숫자 형식도 포맷할 수 있습니다.
CSS 작업 그룹은 2008년 콘텐츠 포맷에 관한 초안을 발표했습니다.하지만 지금은 새로운 것이 없습니다.
자바스크립트의 어떤 숫자에 대해서도 다음 숫자를 사용합니다.
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이 로드될 때 스팬에서 포맷을 하는 것일 것입니다.
답이 아니라 관심있는 사람들입니다.저는 몇 년 전에 CSS WG에 제안서를 보냈습니다.하지만 아무 일도 일어나지 않았습니다.정말로 그들(및 브라우저 공급업체)이 이것을 진정한 개발자 문제로 본다면 공이 굴러가기 시작할 수도 있을까요?
아니요, 일단 DOM에 있으면 자바스크립트를 사용하거나 언어서버측(PHP/Ruby/python 등)을 통해 포맷해야 합니다.
도움이 된다면...
PHP 기능과 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+를 사용하는 또 다른 솔루션 및 클래스 HTML :lang().
일부 HTML을 사용하여 클래스와 숫자를 표시합니다.thousands-separator그리고.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>
을 합니다.lang숫자 형식을 지정하는 pseudo-class입니다.
/* 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: ",";
}
코드펜: https://codepen.io/danielblazquez/pen/qBqVjGy
난 네가 할 수 있다고 생각하지 않아.PHP로 코딩하는 경우 number_format()을 사용할 수 있습니다.그리고 다른 프로그래밍 언어들도 숫자를 포맷하는 기능을 가지고 있습니다.
이 목적으로는 CSS를 사용할 수 없습니다.적용 가능하다면 자바스크립트를 사용하는 것을 추천합니다.printf/string과 동등한 자바스크립트에 대한 자세한 정보는 이것을 보세요.체재를 갖추다
또한 Petr이 언급한 것처럼 서버 측에서 처리할 수 있지만 시나리오에 따라 완전히 달라집니다.
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.09000000%
형식화된 숫자(7): 023%
형식 번호(8): 120E3
Seeve의 작업을 개선하기 위한 또 다른 js 솔루션:
<input type="text" onkeyup="this.value=this.value.toString().replaceAll(/[^\d]/g, '').replaceAll(/(\d)(?=(?:\d\d\d)+$)/g, '$1\u202f')" pattern="[0-9\s]*">의 인라인 자바스크립트의 예제input[type=number]-Html 필드, 바닐라 JS 사용:
<input class="form-number"
type="number"
id="bar"
name="foo"
value=""
step="any"
min="0"
size="20"
onfocusout="this.value = (new Intl.NumberFormat('de-DE').format(this.value));">
숫자를 포맷하는 것은 상당히 깊은 곳으로 내려갈 수 있습니다. 모든 종류의 잘못된 경로들을 말이죠.예를 들어, 출력을 변경하는 도구를 사용할 수 있습니다.$그리고.£누가 읽느냐에 따라 그 결과물 중 적어도 하나는 거짓이어야 함에도 불구하고 말입니다.
그러나 수천 개의 분리기를 사용할 때 혼동 없이 수천 개의 분리기가 있는 숫자의 가독성만 걱정된다면 국제 표준을 따르고 사용자 선호를 무시하는 것이 최선일 것입니다.세 자리마다 얇은 공백을 삽입하고, 소수점 구분자가 다음과 같은지에 대해 호들갑을 떨지 마십시오..아니면,.
원하는 것이 그것뿐이라면 사용 중인 글꼴을 패치하고 CSS를 사용하여 특정 글꼴 기능을 활성화하여 글꼴을 보다 친근한 방식으로 포맷하는 것이 한 가지 방법입니다.
저는 이것을 시도해 보고 싶어서, Numderline 글꼴 패처를 킥오프 포인트로 사용하여 이것을 가능하게 하는 도구를 만들었습니다.
숫자를 숫자 그룹화로 포맷할 것을 나타내는 CSS 글꼴 기능 설정으로 간단히 표시하면 됩니다.
font-feature-settings: "dgsp";
이제 이론적으로 글꼴은 현재 언어 설정에 따라 자동으로 동작을 조정할 수 있어야 하며, 적절한 경우 점이나 쉼표 등을 삽입해야 합니다.그것이 원래 의도였지만, 제가 어떻게 해야 하는지 배우던 중에 이것이 권장되지 않는다는 것을 설명하는 토론을 발견했습니다. 그리고 디자인 철학은 기능을 사용할 수 있게 해주되 사용자 선호 및/또는 로케일에 따라 사용할 추가 설정을 애플리케이션이 통과하도록 하는 것입니다.
따라서 도구는 대체 기능 이름을 제공합니다.dgco공백 대신 쉼표를 사용하고,dgdo공백 대신 점을 사용하는 것입니다. (십진수 점을 십진수 쉼표로 변경해야 하는 추악한 부작용이 있습니다. 그래서 이것을 매우 주의해야 합니다.)
내가 찾을 수 있는 가장 가까운 것은<input type="number" />tag, 이것은 일반 HTML에서 포맷을 하지만 입력 필드이기도 합니다.평범한 텍스트처럼 보이게 하기 위해 CSS를 조금 사용할 수 있습니다.
유감스럽게도 자바스크립트나 모노스페이스 폰트 없이 오른쪽 여백을 수정하고 너비 속성 서버 쪽을 설정하는 방법을 모르겠습니다.
HTML:
<p>In <input type="number" value="1.223" readonly="readonly" size="1" /> line</p>
CSS:
p {font-family: verdana;}
input {
font-family: verdana;
font-size: 16px;
}
input[readonly] {
border: 0;
padding: 0;
margin: 0;
min-width: 3em;
font-size: 16px;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
이것은 제가 위키피디아에서 이 페이지의 코드에서 발견한 것입니다.아래는 숫자 149597870700으로 .15em 마진을 천 개의 구분자로 사용합니다.
<span style="white-space:nowrap">
149
<span style="margin-left:.15em;">597</span>
<span style="margin-left:.15em;">870</span>
<span style="margin-left:.15em;">700</span>
</span>언급URL : https://stackoverflow.com/questions/8677805/formatting-numbers-decimal-places-thousands-separators-localization-etc-wit
'programing' 카테고리의 다른 글
| Linux에서 파일을 열 때 O_CLOEXEC을 언제 사용해야 합니까? (0) | 2023.10.19 |
|---|---|
| jQuery derped의 "그때" 방법을 언제 사용해야 하고 "파이프" 방법을 언제 사용해야 합니까? (0) | 2023.10.19 |
| 테이블에 두 개의 외국 열쇠가 있을 수 있습니까? (0) | 2023.10.14 |
| 여러 표를 기준으로 합산하는 방법 (0) | 2023.10.14 |
| XML 주석 및 "--" (0) | 2023.10.14 |