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