line-clamp

url

Sintaxis

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

line-clamp acepta los siguientes valores en el borrador actual de la especificación:

  • none: establece un máximo en el número de líneas y, como resultado, no se producirá ningún truncamiento.
  • <integer>: establece el número máximo de líneas antes de truncar el contenido y luego muestra puntos suspensivos (…) al final de la última línea.

Los puntos suspensivos deben representarse como un carácter Unicode (U + 2026) pero pueden reemplazarse por un equivalente basado en el idioma del contenido y el modo de escritura del User-Agent que se utiliza.

Oye, ¿no puedo hacer esto con desbordamiento de texto?

Buena pregunta, mi amigo, y la respuesta es, bueno …

(¿Ves lo que hice ahí?)

… sorta .

text-overflowtiene un ellipsisvalor que truncará el texto:

.truncate {
  text-overflow: ellipsis;

  /* Needed to make it work */
  overflow: hidden;
  white-space: nowrap;
}
 

Bien, bien, ese es un buen comienzo. Pero, ¿qué sucede si queremos introducir los puntos suspensivos no en la primera línea sino en algún lugar, digamos, la tercera línea de texto?

Ahí es donde line-clampentra en juego. Solo tenga en cuenta que se usa una combinación de tres propiedades para que esto suceda:

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

Firefox admite esto ahora, exactamente de esta manera (con los -webkit-prefijos y todo).

Entonces, ¿cuál es el problema?

A partir de ahora, es soporte de navegador. Las pinzas de línea son parte del Nivel 3 del Módulo de desbordamiento de CSS que actualmente se encuentra en el Borrador del editor y actualmente no es compatible.

Podemos obtener alguna acción de sujeción de línea con un -webkit-prefijo (que, curiosamente, funciona en todos los principales navegadores). De hecho, así fue como se hizo la demostración anterior.

Podríamos seguir la ruta de JavaScript si quisiéramos. Clamp.js hará el truco:

Soporte del navegador

Este es el soporte para la propiedad de WebKit y la implementación indocumentada de pinza de línea.

Los datos de soporte de este navegador son de Caniuse , que tiene más detalles. Un número indica que el navegador admite la función en esa versión y en adelante.

Escritorio

Cromo Ópera Firefox ES DECIR Borde Safari
14 * 15* 68 * No 17 5 *

Móvil / tableta

Safari de iOS Opera Mobile mini Opera Androide Android Chrome Android Firefox
5.0-5.1 * 46 * No 2.3 * 75 * No