Can you format numbers in css?
Is it possible to format numbers with CSS? That is: decimal places, decimal separator, thousands separator, etc. Show
Mir-Ismaili 11.6k5 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,8771 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,3044 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,7101 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,3871 gold badge17 silver badges39 bronze badges Can you format numbers with CSS?Given a number and the task is to format the number of an HTML element as currency using CSS and a little bit of JavaScript. It is not possible to complete the task with pure CSS.
Can you use decimals 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… probably would be read as 3. Furthermore you have to remember many elements use padding, margins and borders.
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 add a comma to a number in HTML?The toLocaleString method lets us format a number to a string with commas as thousands of separators automatically. You can do HTML input number format comma with it. Or using autoNumeric plugin you can make a field as numeric input with different separators.
|