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!!
[…] si ahora queremos truncar el texto con puntos suspensivos en css, podemos hacerlo añadiendo la propiedad […]