Truncar el texto y añadir puntos suspensivos con CSS

Hola!

Esta es una de las funciones no muy conocidas de CSS, parte de programadores lo resuelven con PHP, otros con JS, etc… de cualquier modo, si solo necesitamos truncar el texto a nivel visual «text-overflow:ellipsis;» es nuestra amiga.

Esta es la div donde no truncamos el texto con CSS:

Esta es la div donde no truncamos el texto con CSS.

Aquí forzamos el NO salto de linea con CSS:
Añadimos las propiedades:

// Nos oscultará la parte de texto que no "quepa dentro de la div"
overflow:hidden;
// Fuerza a que el texto no salte de linea
white-space:nowrap;
Aquí forzamos el NO salto de linea con CSS.

Truncamos el texto y forzamos el NO salto de linea con CSS:
Junto con las dos anteriores, añadimos «text-overflow:ellipsis;»

// Añade los tres puntitos al final de la DIV, respetando nuestro medidas; padding, with...
text-overflow:ellipsis;
Truncamos el texto y forzamos el NO salto de linea con CSS.

Espero que os ayude 🙂
Un saludo!!


Tu opinión es importante para mi, ¿Te ha resultado útil este artículo?

¿Eres programador/a?

En Pulpo están buscando nuevos talentos, envíales un email a developers@pulpoapp.com.

1 Comments

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*