line-clamp | CSS | Aprende a delimitar lineas de texto

CSS line-clamp

La propiedad css line-clamp nos permite limitar el número de lineas visible en un bloque de texto

Syntax

.module {
   line-clamp: [none | <numero>];
}

line-clamp permite una de las 2 propiedades citadas anteriormente, a continuación se detallan:

• none: Indica que no tiene un número máximo de lineas
• <numero>: Indica el número máximo de lineas que puede mostrar

Esta propiedad CSS es un “shorthand” de las propiedades max-lines, block-ellipsis y continue.

¿Cómo usarlo?

Para usarlo es importante usar una serie de propiedades extra, a continuación dejo un ejemplo de código a usar

.ejemplo {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

A continuación explico cada una de las propiedades:

• display: -webkit-box || Debe ser usado en conjunto con -webkit-line-clamp para aplicar el truncamiento de lineas.
• -webkit-box-orient: vertical || Especifica la forma mediante la cual debe ser mostrada la información (Vertical u horizontal)
• overflow: hidden || Usado para ocultar el contenido que excede el tamaño del contenedor

Ejemplo

See the Pen line-clamp acabeza.es by Adrian C (@cr4id3r) on CodePen.

Incidencia con Safari

Cuando usamos la propiedad en un navegador como Safari, debemos asegurarnos de que el contenido no esté dentro de ningún otro elemento como <div>, ya que en ese momento se ocultará y no se podrá visualizar el contenido