En algún caso podríamos necesitar calcular desde JavaScript cuanto nos va a ocupar un texto en la pantalla.
Para ello haremos uso de una capa que nos hará las veces de regla. Esta capa deberá tener los mismos estilos que el destino del texto que queremos medir, o asignarle estos estilos cada vez que vayamos a medir.
El código HTML de la capa es este:
<span id="ruler"></span>
Para que no se vea esta capa le asignaremos el siguiente CSS:
#ruler { visibility: hidden; white-space: nowrap; position: absolute; top: -100; left: 0px; }
Y como último paso extenderemos la clase string de JavaScript con dos métodos que nos permitirán calcular el ancho de un texto en pixeles y recortar un texto a un ancho determinado.
// Calcula los pixeles de ancho que ocupa un texto String.prototype.visualLength = function() { var ruler = document.getElementById("ruler"); ruler.innerHTML = this; return ruler.offsetWidth; } // Recorta un texto al número de pixeles indicados, añadiendo un "..." en el caso de haber sido recortado String.prototype.trimToPx = function(length) { var tmp = this; var trimmed = this; if (tmp.visualLength() > length) { trimmed += "..."; while (trimmed.visualLength() > length) { tmp = tmp.substring(0, tmp.length-1); trimmed = tmp + "..."; } } return trimmed; }
Para solo llamar a visual una vez (más rápido).
Un saludo.
String.prototype.pxToChar = function(length)
{
var tmp = this;
try{
var px=tmp.visualLength();
var pxch=(px / tmp.length);
var chars=(Math.round(length/pxch));
return tmp.substring(0,(chars-1)-3)+»…»;
}catch(err){
return tmp.substring(0,tmp.length-1);
}
}
Bueno, es mucho más rápido pero no es exacto porque no todos los carácteres tienen el mismo ancho.
No es lo mismo «WWWWWWWW» (8 W´s) que «iiiiiiii» (8 i´s)
Cierto Oscar… es una aproximación.
Un saludo.
usen canvas
var jk=’normal 32px arial’;//propiedades css del elemento;
var c=document.createElement(«CANVAS»);
var ctx=c.getContext(«2d»);
ctx.font=c;
ancho=ctx.measureText(s).width;//ancho del texto
me falto
ctx.font=jk;
hay vean donde va
No es necesario hacer tanto calculo, ya hay una propiedad en javascript que la trae.
Para el ancho clientWidth y para el alto clientHeight, los pones dentro de una etiqueta p, t1 o span la que quieras, a esa etiqueta le pones el font que quieras y te esas propiedades te regresan el dato en pixeles.