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?

Agregar puntos suspensivos

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.

Deja una respuesta

Mira más contenido relacionado

¿Cómo agregar una imagen de perfil a Zoom en Windows y Android?

por Tecneófito, agosto 17, 2021

Agregar una imagen de perfil a Zoom no es una tarea complicada, pero primero veamos...

Cómo utilizar el análisis de la competencia para mejorar su SEO

por Tecneófito, agosto 9, 2021

El análisis de la competencia no es una estrategia nueva. La historia nos ha mostrado...

¿Por qué la música de Spotify se pausa sola y como solucionarlo?

por Tecneófito, mayo 4, 2020

Spotify se ha visto afectado por una serie de problemas que hacen que las canciones...

¿Cómo abrir archivos RTF en PC usando Google Chrome?

por Tecneófito, mayo 3, 2020

Probablemente esté aquí porque no puede abrir el archivo con la extensión ".rtf" o...

Cómo mover mi blog de Wix a WordPress

por Tecneófito, abril 28, 2020

Wix es un impresionante creador de sitios web que parece perfectamente adaptado a...

Cómo proteger su perfil de Netflix usando un código PIN

por Tecneófito, abril 20, 2020

Netflix es una de las principales plataformas de streaming para ver películas y...