Hola a todos:

CSS nos proporciona una opción muy interesante cuando queremos cortar un texto que es mas largo que su contenedor añadiéndole puntos suspensivos. Esta opción es muy útil y se consigue utilizando la propiedad css  text-overflow: ellipsis.

Si tenemos un div conteniendo texto por ejemplo:

<div id="container" class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed dolor ac sapien interdum interdum. Etiam leo tortor, tincidunt eu neque nec, laoreet ullamcorper augue. Phasellus commodo tincidunt ligula, quis sodales est tempus ut. Donec non finibus dolor, quis molestie ligula. Sed orci magna, vehicula ut dui in, posuere rhoncus augue. </div>

Y se  asignamos un css como este:

#container {
 width: 250px;
 height: 40px;
 padding: 10px;
 overflow: hidden;
 border: 2px solid #000;
 white-space: nowrap;
 text-overflow: ellipsis;
 }

Obtendremos algo así:

Sin embargo esto tiene un problema y es que solo sirve para mostrar textos en una sola línea.

Hay otras soluciones css mas complejas que intentar solucionar esto añadiendo mas elementos html  pero no siempre el resultado es bueno.

La solución que hoy os presento es una  pequeña función javascript que hará que podamos mostrar puntos suspensivos al final cuanto un texto supere en tamaño a su contenedor.

He creado una función que nos permite solucionar esto:

function ellipsis(selector){
 var nodeList = document.querySelectorAll(selector);
 arrNodes = [].slice.call(nodeList);
 for (var i in arrNodes)
 {
   var n = arrNodes[i];
   while(n.scrollHeight-n.offsetHeight>0)
   {
     var text = (n.innerText != undefined) ? n.innerText : n.textContent;
     if(n.innerText != undefined)
     {
         n.innerText=text.replace(/\W*\s(\S)*$/, '...');
     }
     else
     {
       // Para Firefox
       n.textContent = text.replace(/\W*\s(\S)*$/, '...');
     }
   }
 }
}

Para conseguir el efecto text-overflow: ellipsis multilinea solo tenemos que llamar a esta función en el evento onload pasandole el selector css al que hay que aplicar el evento.

Por ejemplo si queremos que se aplique en todos los elementos  que tengan la clase ellipsis debemos llamarla así:

ellipsis('.ellipsis');

Se puede utilizar cualquier selector css.

Al ejemplo anterior vamos a darle más altura al contenedor y eliminamos white-space: nowrap;  quedando el css como sigue:

#container {
 width: 200px;
 height: 100px;
 padding: 10px;
 overflow: hidden;
 border: 2px solid #000;
 }

Al aplicarle la función obtendremos algo como esto:

Si estáis usando jQuery podeis llamar a la función en el evento ready:

$( document ).ready(function() {ellipsis('.ellipsis');});

Solo queda decir que esta función no necesita jQuery para funcionar así que la podéis llamar en el evento onload de la pagina.

window.onload = function(){ ellipsis ('.ellipsis') }

Eso es todo por hoy, espero que sea de utilidad.