miércoles, 29 de enero de 2025

👨‍💻 Sobre la propiedad -webkit-line-clamp

La propiedad -webkit-line-clamp. es una función de CSS que permite limitar el número de líneas de un bloque de contenido, al número especificado de líneas por la regla de -webkit-line-clamp.

Solo funciona en combinación con la displaypropiedad establec

Cómo funciona

  • Limita el contenido de un bloque a un número específico de líneas.
  • Muestra puntos suspensivos (...) al final del texto.
  • Puede usarse con un diseño adaptable para mostrar una cantidad diferente de líneas según el ancho de la pantalla.

Requisitos

  • Para que funcione, debe usarse en combinación con la propiedad display establecida en -webkit-box o -webkit-inline-box.
  • También debe usarse con la propiedad -webkit-box-orient establecida en vertical.

A pesar de que están en desuso, la codependencia de estas tres propiedades es un comportamiento completamente especificado y seguirá siendo compatible.

Consideraciones

  • No es una función básica, ya que no funciona en algunos navegadores muy utilizados.
  • Cuando se aplica a elementos de anclaje, el truncamiento puede ocurrir en el medio del texto.

Sintaxis


/* Keyword value */
-webkit-line-clamp: none;

/*  values */
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/* Global values */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: revert;
-webkit-line-clamp: revert-layer;
-webkit-line-clamp: unset;

Ejemplo

Truncando un párrafo

 
  
  CSS:
  
<style>
.clamp {
  width: 400px;height:auto;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;text-align:justify;
  overflow: hidden;
}
</style>
  
  HTML:

<p class="clamp">En este ejemplo, la propiedad -webkit-line-clamp se establece en 3, lo que significa que el texto se sujeta después de tres líneas. Una elipsis
  se mostrará en el punto donde se sujeta el texto en cumplimiento de la regla de esta propiedad, por lo que se  mostrarán puntos suspensivos  después de tres líneas.</p>

Resultado:

En este ejemplo, la propiedad -webkit-line-clamp se establece en 3, lo que significa que el texto se sujeta después de tres líneas. Una elipsis se mostrará en el punto donde se sujeta el texto en cumplimiento de la regla de esta propiedad, por lo que se mostrarán puntos suspensivos después de tres líneas.


Fuentes:



a la/s
Etiquetas: ,