Eso es algo difícil de hacer, porque una cadena, digamos de 30 carácteres no siempre hacen la misma longitud y pues se haría imposible calcular la longitud exacta de una cadena para que quepe en una ancho determinado.
Ahora se me ocurre algo, podría funcionar pero no sería exactamente lo que quieres, es decir comúnmente sobraría algo de espacio. Sería de este modo:
Cuando carga la pagina ejecutas una función, digamos setWidth();
<body onload="setWidth()">
Y esta sería la función:
Código:
function setWidth() {
var dv = document.getElementById("contenedor"); /* Referencio al DIV en cuestion */
var wi = dv.offsetWidth /* Obtengo su ancho */
var len = Math.round((wi / 5)); /* Hallamos un número que resulta de la división del ancho del DIV entre un número que debería ser el promedio del ancho de cada carácter */
var txt = dv.innerHTML.toString(); /* Obtengo el texto del DIV */
var lTxt = txt.length; /* Obtengo la longitud del texto */
txt = txt.substr(0, len) /* Corto el texto */
if (lTxt > len) txt += "..."; /* Si la longitud original es mayor que la longitud resultante */
dv.innerHTML = txt; /* Asigno el texto cortado al DIV */
}
La idea de esta función es calcular una posible la longitud de la cadena en función del ancho del DIV contenedor, dividiendo a ese ancho entre un número que debería ser el promedio del ancho de un carácter. Esto trae muchos problemas, los carácteres no tienen un ancho fijo, o sea, la "i" tiene mucho menos ancho que la "o" y así cada letra tiene distinto ancho y eso depende de la fuente. Ahora, qué pasaría si el usuario modifica el tamaño de la fuente? Es fácil: Ver -> Tamaño de texto ->
Para ese caso también debes ponerle el estilo overflow: hidden, para evitar que el texto se sobrepase y claro, no tendrías la opción de colocar los puntos suspensivos.
De todos modos espero que te sirva.