Puntos suspensivos para recortar textos con CSS

Esta es una guía para ocultar una parte de cualquier texto en tu web y mostrar tres puntos suspensivos.

Pasar de esto:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ante

a esto:
Lorem ipsum dolor sit amet, consec...

Para ello utilizaremos tres propiedades CSS white-space, overflow y text-overflow.

Cómo lo usamos?

Primero debemos crear una clase en nuestra hoja de estilos. Lo nombraré recortar.

.recortar {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

El segundo paso es utilizarlo en nuestro html. Basta con agregar la clase que hemos creado, recortar, en la etiqueta html que queramos.

Ejm:

<div class="title">Tecneofito, blog sobre tecnología, blogging, recursos y más.</div>

Tecneofito, blog sobre tecnología, blogging, recursos y más.

Para recortar este texto, agregaremos la clase recortar.

<div class="title recortar">Tecneofito, blog sobre tecnología, blogging, recursos y más.</div>

Tecneofito, blog sobre tecnología, b...

Si tienes problemas para recortar los textos y reemplazarlos con puntos suspensivos, espero tus comentarios.