¿Es posible formatear números con CSS? Es decir: lugares decimales, separador decimal, separador de miles, etc.
¿Es posible formatear números con CSS? Es decir: lugares decimales, separador decimal, separador de miles, etc.
Respuestas:
Puede utilizar Number.prototype.toLocaleString()
. También puede formatear para otros formatos de números, por ejemplo, latín, árabe, etc.
El grupo de trabajo de CSS ha publicado un borrador sobre formato de contenido en 2008. Pero nada nuevo en este momento.
Bueno, para cualquier número en Javascript, uso el siguiente:
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();
y si necesita usar cualquier otro separador como coma, por ejemplo:
var sep = ",";
a = a.replace(/\s/g, sep);
o en función:
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;
}
_number.replace
, tenemos que asegurarnos de que sea una cadena como esta _number = typeof _number != "undefined" && _number > 0 ? String(_number) : "";
o, de lo contrario, obtendrá un error _number.replace
que no está definido o no es una función
No, debe usar javascript una vez que esté en el DOM o formatearlo a través de su idioma del lado del servidor (PHP / ruby / python, etc.)
rtl
, que muestra el mismo contenido de una manera diferente: ¿debería tratarse también del lado del servidor?
No es una respuesta, pero perhpas de interés. Envié una propuesta al CSS WG hace unos años. Sin embargo, no ha pasado nada. Si realmente ellos (y los proveedores de navegadores) vieran esto como una preocupación genuina de los desarrolladores, ¿quizás la pelota podría comenzar a rodar?
Si ayuda ...
Utilizo la función PHP number_format()
y el espacio estrecho sin interrupciones (  
). A menudo se utiliza como un separador de miles inequívoco.
echo number_format(200000, 0, "", " ");
Debido a que IE8 tiene algunos problemas para representar el espacio estrecho sin interrupciones, lo cambié por un SPAN
echo "<span class='number'>".number_format(200000, 0, "", "<span></span>")."</span>";
.number SPAN{
padding: 0 1px;
}
No puede usar CSS para este propósito. Recomiendo usar JavaScript si es aplicable. Eche un vistazo a esto para obtener más información: JavaScript equivalente a printf / string.format
Además, como mencionó Petr, puede manejarlo en el lado del servidor, pero depende totalmente de su escenario.
No creo que puedas. Puede usar number_format () si está codificando en PHP. Y otros lenguajes de programación también tienen una función para formatear números.
Puede usar la biblioteca de etiquetas Jstl para formatear páginas 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>
Resultado
Número formateado (1): £ 120,000.23
Número formateado (2): 000.231
Número formateado (3): 120,000.231
Número formateado (4): 120000.231
Número formateado (5): 023%
Número formateado (6): 12,000,023.0900000000%
Número formateado (7): 023%
Número formateado (8): 120E3