Una funcionalidad muy útil para un blog u otra sección de una página web donde se desee ocultar texto y que se despliegue tras hacer clic, es el truncar texto en CSS.
En el video siguiente, nuestro profesor del bootcamp, Sergio Jiménez, explica cómo truncar textos en CSS con las propiedades text-overflow o line-clamp.
Aceptar el consentimiento para ver esto
En esta ocasión, Sergio explica cómo se puede truncar el texto en CSS obteniendo como resultado una sola línea. Para ello, aplica el siguiente código en CSS editando los párrafos dentro de los distintos div de HTML:
div p {
padding: 0 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div p:active {
white-space: normal;
}
No obstante, esto es válido para truncar el texto en una sola línea. Si quieres que aparezcan más líneas una vez se trunca el texto, tienes que usar webkit. De esta forma, quedaría el siguiente código:
div p {
padding: 0 10px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
div p:active {
display: block;
}
Como puedes comprobar en el vídeo, con este ejemplo se podrán mostrar tres líneas o las que consideres personalizándolo a tu gusto, cambiando el valor de line-clamp.
Ahora ya sabes cómo truncar textos en CSS de una forma sencilla, pero puedes aprender mucho más sobre programación con nuestro Bootcamp Full Stack Web Developer. ¡Échale un vistazo!
