Cortar texto según medida dada en pixeles

[pedromir]

Hola, tengo un array con un campo donde tengo texto y quiero limitar la longitud de ese texto, como el div tiene 20px de anchura, necesito limitar la longitud a esa anchura y si la supera necesito cortarlo con substring, pero si lo corto por nº de caracteres como la anchura de estos varía en función de la letra que sea, unos textos me van a quedar más cortos que otros, así que tengo una función que me dice la anchura de todo el texto en pixeles, teniendo en cuenta el estilo, el tamaño y la familia de la fuente, pero lo que necesito es que partiendo de esa base la función me diga cuantos caracteres tengo que cortar para que el texto resultante me mida la longitud establecida, o sea, 20px en el caso del ejemplo y meter ese dato en el substring

Código Javascript:

var nombres = new Array();
nombres = [["Luis","En un lugar de la Mancha"],
["Antonio","Lorm ipsum dolor sit amet, consecteuer adipi scing elit."]];
 
function cortarTexto(){
    style = 'bold';
    size = '10px';
    family = 'Times New Roman';
    texto = nombres[i][1];
    
    var cssStyle = style + " " + size  + " " + family;
     //creamos el contexto canvas
     var c=document.createElement("CANVAS");
     var contexto2d=c.getContext("2d");
     //le aplicamos el estilo de la fuente al  objeto canvas
     contexto2d.font =cssStyle;
     //nos devuelve el ancho del texto 
     var ancho = contexto2d.measureText(texto).width;
     //retornamos el ancho calculado
     alert(ancho)
     return ancho;
}
 

[Alexis88]

Puedes hacerlo con CSS, utilizando las propiedades text-overflow, overflow y white-space.

Código CSS:

#id de tu contenedor{
    width: el ancho que desees;
    height: la altura que desees;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
 

DEMO

La ventaja consiste en que si algún usuario desactiva JavaScript de su navegador, eso no afectará al resultado final pues es CSS, además, si el usuario redimensiona la ventana, el efecto se seguirá aplicando.

Saludos

[pedromir]

El problema es que he incluido un tooltip que tiene muchas más posibilidades que el simple title, pero el tooltip no permite overflow: hidden; así que he tenido que poner white-space: nowrap; pero con esta propiedad, lógicamente se desborda, por eso quería hacer lo mismo, limitar la longitud pero con javascript