การจัดรูปแบบตัวเลข (ตำแหน่งทศนิยมตัวคั่นหลักพัน ฯลฯ ) ด้วย 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 เป็นต้น)

ไม่ใช่คำตอบ แต่เป็นที่สนใจ ฉันได้ส่งข้อเสนอไปยัง 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 หากสามารถใช้ได้ ดูข้อมูลเพิ่มเติมได้ที่: JavaScript เทียบเท่ากับ printf / string.format

เช่นเดียวกับที่ Petr กล่าวถึงคุณสามารถจัดการได้บนฝั่งเซิร์ฟเวอร์ แต่ทั้งหมดขึ้นอยู่กับสถานการณ์ของคุณ

ฉันไม่คิดว่าคุณจะทำได้ คุณสามารถใช้number_format ()หากคุณกำลังเข้ารหัสด้วย PHP และภาษาโปรแกรมอื่น ๆ ก็มีฟังก์ชันสำหรับการจัดรูปแบบตัวเลขเช่นกัน

คุณสามารถใช้ Jstl tag Library สำหรับการจัดรูปแบบสำหรับ JSP Pages

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>

ผลลัพธ์

Formatted Number (1): 120,000.23 ปอนด์

หมายเลขที่จัดรูปแบบ (2): 000.231

Formatted Number (3): 120,000.231

หมายเลขรูปแบบ (4): 120000.231

หมายเลขรูปแบบ (5): 023%

หมายเลขที่จัดรูปแบบ (6): 12,000,023.0900000000%

หมายเลขรูปแบบ (7): 023%

รูปแบบหมายเลข (8): 120E3