¿Cómo truncar lineas de textos usando CSS?

27 de junio, 2021 - 3 min

En algún momento de nuestras vidas hemos necesitado que cierto texto ocupe exactamente X números de lineas ya que, de no ser así, este rompería la UI. El problema es que muchas veces este texto es dinámico y viene de una API por lo que necesitamos una forma de, independientemente la cantidad de texto, este siempre ocupe una cierta cantidad lineas. En este post veremos como truncar cierta cantidad de lineas de texto usando solamente CSS.

Nota:

Las reglas de css usadas en este post aún son soportadas por todos los navegadores. Puedes revisar el browser-support en los siguientes links:

• Line clamp - CanIUse
• Box Orient - CanIUse

Usando line-clamp y box-oriented

Usando estas dos propiedades de css, podemos crear el siguiente helper:

.line-clamp {  display: -webkit-box;  -webkit-line-clamp: 3; /* número de lineas a truncar */  -webkit-box-orient: vertical;  overflow: hidden;}

Tomando como ejemplo el siguiente código:

const Text = () => (  <span className="line-clamp">  Lorem Ipsum is simply dummy text of the printing and typesetting industry.  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,  when an unknown printer took a galley of type and scrambled it to make a type specimen book.  It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially  unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,  and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.  </span>)

Usando la clase de css creada "line-clamp", podemos hacer que el texto sea exactamente de 3 lineas:

Conclusión

El truncar texto es algo que, en algún momento de tu vida como Frontend developer, necesitarás. Como ya vimos, no es tan complicado como parece, usando unicamente css podemos lograr efecto deseado.

¡Gracias por leer!

Comparte este artículo: