Calcular el ancho de un texto y acortarlo a un número de pixeles dado en JavaScript

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

6 comentarios en “Calcular el ancho de un texto y acortarlo a un número de pixeles dado en JavaScript

  1. 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);
    }
    }

  2. 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

  3. 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.

Responder a scrntprcrz Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.