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

5 pensamientos 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

Deja un comentario

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

Loading Facebook Comments ...