Propiedad max-lines de CSS

La propiedad CSS max-lines limita el número de líneas visibles en un contenedor de bloque. Cuando el contenido excede este límite, se recorta mediante el manejo de desbordamiento del contenedor. Este comportamiento funciona junto con block-overflow: clamp; para ocultar el contenido excedente de manera limpia.

La propiedad max-lines puede crear un efecto de recorte junto con la propiedad block-overflow.

INFO

Esta propiedad está en desarrollo.

Recordemos que la propiedad line-clamp es una abreviatura de las propiedades max-lines y block-overflow.

WARNING

La propiedad max-lines actualmente no es compatible con todos los navegadores. Para una mayor compatibilidad, puedes usar la propiedad -webkit-line-clamp como alternativa.

INFO

El soporte del navegador es limitado. Consulta MDN para ver la compatibilidad actualizada.

Valor inicial	none
Se aplica a	Cajas de fragmento.
Heredable	No.
Animable	No.
Versión	CSS Overflow Module Level 4
Sintaxis DOM	object.style.maxLines = "2";

Sintaxis

Sintaxis de la propiedad CSS max-lines

css

max-lines: none | <integer> | initial | inherit;

Ejemplo de la propiedad max-lines:

Ejemplo de la propiedad CSS max-lines

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        overflow: hidden;
        box-sizing: content-box;
        width: 300px;
        font-size: 16px;
        line-height: 24px;
        font-family: Helvetica, sans-serif;
        max-lines: 3;
        block-overflow: clamp;
        -webkit-line-clamp: 3;
      }
    </style>
  </head>
  <body>
    <h2>Max-lines property example</h2>
    <p>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.</p>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción
none	No se especifica un número máximo de líneas.
`<integer>`	Establece el número de líneas antes de que el contenido se recorte. Los valores negativos no son válidos.
initial	Establece la propiedad en su valor predeterminado.
inherit	Hereda la propiedad de su elemento principal.

Práctica

¿Cuál es la función de la propiedad 'max-lines' en CSS?

Establece el número máximo de palabras en un texto.Establece el número máximo de líneas en un bloque.Establece la altura máxima de un elemento.Se utiliza para truncar el texto a un número específico de líneas.Pone un texto en negrita.

Propiedad max-lines de CSS ​

Sintaxis ​

Ejemplo de la propiedad max-lines: ​

Valores ​

Práctica ​

Propiedad max-lines de CSS

Sintaxis

Ejemplo de la propiedad max-lines:

Valores

Práctica