Abrazadera de línea - Trucos CSS

La line-clamppropiedad trunca el texto en un número específico de líneas.

La especificación es actualmente un borrador del editor, por lo que eso significa que nada aquí está escrito en piedra porque es un trabajo en progreso. Dicho esto, se define como una abreviatura de max-linesy block-overflow, el primero de los cuales se señala como en riesgo de ser eliminado en la Recomendación Candidata.

Es fácil ver cómo max-linesse eliminaría ya que su función (establecer el número de líneas antes de truncar) ya está incorporada line-clampy cualquier abstracción adicional podría ser innecesaria. Pero eso nos está desviando, así que sigamos adelante.

Sintaxis

.module ( line-clamp: (none | ); )

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

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

Esa elipsis debería mostrarse como un carácter Unicode (U + 2026) pero podría ser reemplazado por un equivalente basado en el idioma del contenido y el modo de escritura del User-Agent que se está utilizando.

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

Buena pregunta, amigo mío, y la respuesta es, bueno ...

(¿Ves lo que hice ahí?)

… Sorta.

text-overflowde hecho, tiene un ellipsisvalor que truncará el texto:

.truncate ( text-overflow: ellipsis; /* Needed to make it work */ overflow: hidden; white-space: nowrap; )

Vea el desbordamiento de texto de Pen de Geoff Graham (@geoffgraham) en CodePen.

Muy bien, es un buen comienzo. Pero, ¿qué pasa si queremos introducir la elipsis 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; )

Vea la pinza de línea Pen (-webkit) de Geoff Graham (@geoffgraham) en CodePen.

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

Entonces, ¿cuál es el truco?

A partir de ahora, es compatible con el navegador. Las abrazaderas de línea son parte del módulo de desbordamiento de CSS de nivel 3, que se encuentra actualmente en el borrador del editor y no es compatible en este momento.

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

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

Vea la pinza de línea del lápiz (clamp.js) de Geoff Graham (@geoffgraham) en CodePen.

Soporte del navegador

Este es el soporte para la implementación no documentada y propiedad de WebKit de la abrazadera de línea.

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