Propiedad CSS max-lines
Usa la propiedad CSS max-lines para especificar el número máximo de líneas del contenido. Ve ejemplos y pruébalo tú mismo.
La propiedad CSS max-lines limita el número de líneas visibles en un contenedor de bloque. Cuando el contenido supera ese límite, las líneas adicionales se eliminan de la vista y el manejo del desbordamiento del contenedor decide qué ocurre con ellas. En la práctica se combina max-lines con block-overflow: clamp para que el texto se corte limpiamente en el límite de línea en lugar de interrumpirse a mitad de un carácter.
¿Cuándo usarla?
El caso de uso clásico es un teasers de "leer más" de varias líneas: una tarjeta, fragmento de noticias o descripción de producto que nunca debe crecer más de, por ejemplo, tres líneas sin importar cuán largo sea el texto fuente. Sin un límite de líneas, un párrafo largo empuja hacia abajo todo lo que está debajo y rompe la cuadrícula. max-lines limita la altura en términos de líneas en lugar de un height fijo en píxeles, por lo que el cuadro permanece consistente incluso cuando cambia el tamaño de fuente o el interlineado.
max-lines es el bloque constructivo de forma extendida. Dos propiedades relacionadas completan la misma función:
- block-overflow — controla cómo se renderiza el borde recortado (por ejemplo,
clampañade puntos suspensivos en el punto de corte). - line-clamp — un atajo que establece
max-linesyblock-overflowjuntos en una sola declaración.
max-lines es parte del CSS Overflow Module Level 4, que aún está evolucionando, y no está implementado por ningún navegador principal en el momento de escribir esto. Para el trabajo en producción hoy, usa la propiedad -webkit-line-clamp, ampliamente compatible, en su lugar (se muestra en el ejemplo a continuación). Comprueba siempre la compatibilidad actual antes de publicar — consulta la referencia de line-clamp en MDN.
Cómo funciona el recorte hoy (-webkit-line-clamp)
Dado que max-lines todavía no es utilizable, el equivalente práctico es una pequeña y conocida combinación de propiedades:
.teaser {
display: -webkit-box; /* required for the clamp to apply */
-webkit-box-orient: vertical;/* stack the lines vertically */
-webkit-line-clamp: 3; /* keep only the first 3 lines */
overflow: hidden; /* hide everything past the clamp */
}Esto produce el mismo resultado visual que max-lines: 3 está diseñado para lograr: como máximo tres líneas, con puntos suspensivos (…) donde se corta el texto. El ejemplo más adelante usa tanto la sintaxis experimental max-lines como el respaldo -webkit-line-clamp juntos para que se degrade con gracia.
| 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
max-lines: none | <integer> | initial | inherit;Ejemplo de la propiedad max-lines
El párrafo a continuación está limitado a tres líneas. Las declaraciones max-lines y block-overflow apuntan a los navegadores que eventualmente implementen la especificación; las declaraciones -webkit-box, -webkit-box-orient y -webkit-line-clamp hacen que el mismo efecto funcione en los navegadores actuales.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
width: 300px;
font-size: 16px;
line-height: 24px;
font-family: Helvetica, sans-serif;
overflow: hidden;
/* Experimental, spec-based syntax */
max-lines: 3;
block-overflow: clamp;
/* Widely supported fallback */
display: -webkit-box;
-webkit-box-orient: vertical;
-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>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 sea recortado. Los valores negativos no son válidos. |
| initial | Establece la propiedad a su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Errores comunes
- Todavía no es una opción real. Ningún navegador principal incluye
max-lines, por lo que depender de ella sola deja tu contenido sin recortar. Incluye siempre el respaldo-webkit-line-clamp. - El recorte necesita
overflow: hidden. Ya sea que usesmax-lineso el enfoque-webkit-box, las líneas sobrantes solo se ocultan cuando el desbordamiento está recortado — sin ello el texto sigue desbordándose. -webkit-line-clamprequiere el display de caja. Solo tiene efecto en un elemento condisplay: -webkit-boxy-webkit-box-orient: vertical. Olvidar cualquiera de los dos es la razón más común por la que el recorte "no hace nada."- Cuenta líneas, no caracteres. Una caja más ancha o una fuente más pequeña cabe más texto por línea, por lo que el mismo valor de
max-linesmuestra más palabras. Úsalo para limitar la altura en líneas, no la longitud exacta del texto.
Propiedades relacionadas
- block-overflow — elige cómo se renderiza el borde recortado.
- line-clamp — atajo para
max-linesmásblock-overflow. - text-overflow — añade puntos suspensivos a una sola línea desbordada.
- overflow — controla qué ocurre con cualquier contenido que supere su caja.