🧨 ¡APRENDE a truncar un texto en CSS con 3 líneas!

Muy útil cuando tienes la anchura de una caja y quieres asegurarte que sólo ocupa una línea el texto, independientemente del contenido. 🤗

#shorts

[rgbrgb]

Para n filas sería la siguiente, por ejemplo con 5 lineas máximo.

.resume-text{
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp:5
}

[AngelVargas-mmqq]

Amiguito, sos un genio.. aprendo mucho con tus videos y no solo de programación. Mas que nada aprendo a manejar la frustración y confiar en el proceso.

[oswaldoatahualpa]

excelente esas propiedades, yo lo hacía con javascript xD ahora a usar mas css :)

[neyudo]

Que belleza de Tips 👏👏👏 me encantan cortos y al grano, aveces quieres buscar algo y entre la intro y la charla te llevas 15 min y todavía no dicen nada sobre el título. Muchas gracias

[paoloose]

Les recomiendo ponerle la propiedad title para que el usuario pueda ver el contenido entero del texto :D

[santiagoarias]

Busqué esa solución por mas de un año, muchas gracias

[rafaelarrietat.]

Genial, y si quisiera truncar recién en el tercer párrafo?. Gracias.

[sebastianmedina]

¿Tu curso de Next js el con de twitter está obsoleto o vigente? muchas gracias <3

[egan]

Muchas gracias midu, siempre me pregunte como se hace esto!

[Nik-yspi]

Y en vez de que se oculte el contenido o se muestre (...), como puedo hacer que haga un salto de linea y se muestre debajo?

[christianfajardo]

sabes hacerlo para una cantidad determinada de renglones ?

[juniorsanchez]

En eso lo importante es el width que le das al elemento

[WilliamGRojas]

he probado y funciona, pero cuando agrego padding no se aplica, como podria hacer para que vea un espacio interior con esos puntos suspensivos?

[francoyahuana]

Amigo y si quiero que el texto tenga dos lineas como máximo? Como los títulos de youtube.

[Giangbpro]

ESTO me funciona solo para una sola linea, si quiero hacer 2 lineas?

[Toskan]

Cómo haces eso pero que tenga varias lineas antes de truncar el texto??

[roc]

como guardo este shorts en favoritos??

[leidyyesseniauribemarcos]

Y como puedo hacer para safari? Porque el ellipsis a veces no funciona bien en safari 😢

[Dongnutla]

Quisiera hacer eso, pero con texto de varias líneas, ¿Cómo podría lograrlo?

Tuve una aproximación usando webkit, pero no me confío :c

[matiasbertoni]

alguien sabe como agregarle un salto de lineas ?