Css number format
Is it possible to format numbers with CSS? That is: decimal places, decimal separator, thousands separator, etc. Show
Mir-Ismaili 11.5k5 gold badges69 silver badges94 bronze badges asked Dec 30, 2011 at 9:01
6 The CSS working group has publish a Draft on Content Formatting in 2008. But nothing new right now. answered Jul 10, 2012 at 14:27
YoannYoann 4,8671 gold badge27 silver badges47 bronze badges Well, for any numbers in Javascript I use next one:
and if you need to use any other separator as comma for example:
or as a function:
answered Feb 25, 2015 at 0:03
4 Probably the best way to do so is combo of setting a span with a class denoting your formatting then use Jquery .each to do formatting on the spans when the DOM is loaded... answered Aug 6, 2012 at 20:47
RossRoss 1,6251 gold badge17 silver badges22 bronze badges Not an answer, but perhpas of interest. I did send a proposal to the CSS WG a few years ago. However, nothing has happened. If indeed they (and browser vendors) would see this as a genuine developer concern, perhaps the ball could start rolling? answered Aug 14, 2012 at 13:58
itpastornitpastorn 2,9171 gold badge21 silver badges24 bronze badges 1 No, you have to use javascript once it's in the DOM or format it via your language server-side (PHP/ruby/python etc.) answered Dec 30, 2011 at 9:06
mreqmreq 6,2944 gold badges34 silver badges56 bronze badges 3 If it helps... I use the PHP function
Because IE8 has some problems to render the Narrow No-break Space, I changed it for a SPAN
answered Jun 26, 2013 at 18:07
DanielBlazquezDanielBlazquez 1,0171 gold badge12 silver badges22 bronze badges 1 I don't think you can. You could use number_format() if you're coding in PHP. And other programing languages have a function for formatting numbers too. answered Dec 30, 2011 at 10:28
Florin FrăticăFlorin Frătică 5774 gold badges7 silver badges13 bronze badges 2 Another
solution with pure CSS+HTML and the pseudo-class Use some HTML to mark up the number with the classes
Use the
Codepen: https://codepen.io/danielblazquez/pen/qBqVjGy answered Feb 23, 2021 at 15:43
DanielBlazquezDanielBlazquez 1,0171 gold badge12 silver badges22 bronze badges You cannot use CSS for this purpose. I recommend using JavaScript if it's applicable. Take a look at this for more information: JavaScript equivalent to printf/string.format Also As Petr mentioned you can handle it on server-side but it's totally depends on your scenario.
answered Dec 30, 2011 at 9:25
QorbaniQorbani 5,7022 gold badges38 silver badges46 bronze badges You could use Jstl tag Library for formatting for JSP Pages
Result Formatted Number (1): £120,000.23 Formatted Number (2): 000.231 Formatted Number (3): 120,000.231 Formatted Number (4): 120000.231 Formatted Number (5): 023% Formatted Number (6): 12,000,023.0900000000% Formatted Number (7): 023% Formatted Number (8): 120E3 answered Aug 16, 2016 at 15:20
as for thousand separators this is what I found on Wikipedia, in the code of this page
answered Jul 29 at 9:17
robotikrobotik 1,7001 gold badge19 silver badges23 bronze badges 2 Another js solution to improve the work of Skeeve:
answered Apr 20 at 8:21
vacsativacsati 4786 silver badges7 bronze badges The closest thing I could find is the Unfortunately I don't know how to fix the right margin without JavaScript or using a monospace font and set the width attribute server side. HTML:
CSS:
answered May 10 at 15:41
Code4R7Code4R7 2,3811 gold badge17 silver badges39 bronze badges Not the answer you're looking for? Browse other questions tagged css number-formatting or ask your own question.Can you format numbers in CSS?CSS can format numbers in a variety of ways. By default, CSS displays numbers as they would appear in an HTML document – that is, without any special formatting. However, CSS can be used to format numbers in a variety of ways.
Do decimals work in CSS?Although you can use decimal places in CSS like 100.0% in reality it best to keep to real numbers for percentages and only upto one decimal place with standard linear integer values. Your 2.9…
How do you change the currency format in HTML?NumberFormat() Method. One of the best ways in JavaScript to format the number as a currency string is to use Intl. NumberFormat() method. You can pass the locale to the method as a parameter and set the dollar sign before the number and format number.
How do I limit decimal places in HTML?To recap, you can use the . toFixed() method to limit decimal places.
|