Formatowanie liczb (miejsca dziesiętne, separatory tysięcy itp.) Za pomocą CSS

Question

Czy można formatować liczby za pomocą CSS? Czyli: miejsc po przecinku, separator dziesiętny, separator tysięcy, itp

Answer 1

Cóż, dla wszelkich liczb w JavaScript Używam następny:

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(); 

i jeśli trzeba używać innych jako separator przecinek na przykład:

var sep = ","; 
a = a.replace(/\s/g, sep); 

lub jako funkcja:

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; 
} 

Answer 2

Nie, trzeba użyć javascript raz to w DOM lub sformatować go poprzez swój język po stronie serwera (PHP/Ruby/Python etc.)

Answer 3

Nie można użyć CSS do tego celu. Polecam korzystanie z JavaScript, jeśli jest to możliwe. Proszę spojrzeć na to, aby uzyskać więcej informacji: JavaScript equivalent to printf/string.format

Również As Petr wspomniał, że poradzisz sobie z tym po stronie serwera, ale to całkowicie zależy od twojego scenariusza.

Answer 4

Nie sądzę, że możesz. Możesz użyć number_format(), jeśli kodujesz w PHP. Inne języki programowania mają również funkcję formatowania liczb.

Answer 5

Grupa robocza ds. CSS opublikowała projekt w wersji Content Formatting w roku 2008. Ale teraz nic nowego.

Answer 6

Prawdopodobnie najlepszym sposobem na to jest combo ustawienia rozpiętość z klasą oznaczający formatowanie następnie użyć jQuery .each zrobić formatowanie na przęseł gdy DOM jest ładowane ...

Answer 7

nie odpowiedź, ale perpopy zainteresowania. Wysłałem a proposal to the CSS WG kilka lat temu. Jednak nic się nie stało. Jeśli rzeczywiście (i dostawcy przeglądarek) postrzegaliby to jako prawdziwy problem deweloperski, być może piłka mogłaby zacząć się kręcić?

Answer 8

Jeśli to pomaga ...

korzystać z funkcji PHP number_format() i Narrow No-break Space ( ). Jest często używany jako jednoznaczny separator tysięcy.

echo number_format(200000, 0, "", " "); 

Bo IE8 ma pewne problemy, aby uczynić Narrow No-przerwa przestrzeń, zmieniłem go na SPAN

echo "<span class='number'>".number_format(200000, 0, "", "<span></span>")."</span>"; 

.number SPAN{ 
    padding: 0 1px; 
} 

Answer 9

można użyć JSTL biblioteki znaczników do formatowania stron 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> 

Wynik

sformatowany numer (1): 120,000.23 £

Sformatowana liczba (2): 000.231

Sformatowana liczba (3): 120,000.231

Sformatowana liczba (4): 120000.231

sformatowany numer (5): 023%

sformatowany numer (6): 12,000,023.0900000000%

sformatowany numer (7): 023%

sformatowany numer (8): 120E3