Propiedad CSS line-clamp

La propiedad line-clamp trunca un bloque de texto a un número específico de líneas y añade puntos suspensivos (…) en el punto donde se corta el texto. Es la forma estándar de crear vistas previas de "Leer más" multilínea — por ejemplo, limitar la descripción de una tarjeta a tres líneas sin importar la longitud del texto original.

Esta página cubre la sintaxis, un ejemplo funcional, las propiedades de soporte de las que depende line-clamp, la compatibilidad con navegadores y el prefijo -webkit-, así como las limitaciones de la propiedad.

Por qué usar line-clamp

Antes de line-clamp, truncar el texto a una línea requería combinar overflow: hidden, white-space: nowrap y text-overflow: ellipsis. Ese truco solo funciona para una sola línea — white-space: nowrap mantiene todo en una fila. line-clamp resuelve el caso multilínea, donde se quieren exactamente tres líneas ajustadas seguidas de puntos suspensivos.

Sintaxis

line-clamp: none | <integer>;

Usa none para desactivar el recorte, o un entero positivo para indicar el número máximo de líneas a mostrar.

Ejemplo de la propiedad line-clamp

El siguiente ejemplo recorta el párrafo a tres líneas. Observa las tres propiedades complementarias — display: -webkit-box, -webkit-box-orient: vertical y overflow: hidden — que son necesarias para que el recorte surta efecto (consulta Propiedades de soporte más abajo).

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        align-items: center;
        background: radial-gradient( farthest-side at bottom left, #eee, #ccc), 
        radial-gradient( farthest-corner at bottom right, #eee, #ccc 400px);
        display: flex;
        flex-direction: column;
        height: 100vh;
        justify-content: center;
        line-height: 1.5;
      }
      .element {
        background-color: #fff;
        box-shadow: 1px 1px 10px #666;
        padding: 2em;
        width: 200px;
      }
      .element p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <h2>CSS line-clamp  property example</h2>
    <div class="element">
      <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.</p>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

![Propiedad CSS line-clamp](/uploads/media/default/0001/04/510c4d8bde7d07ba0ff1b843ad8b4dfdc122aadf.png "CSS line-clamp property result" =420x)

En el ejemplo dado, el texto se corta en la tercera línea. Como -webkit-line-clamp es la forma que los navegadores implementan realmente, se declaran tanto -webkit-line-clamp: 3 como el estándar line-clamp: 3 para que la regla funcione en todos los navegadores actuales y siga siendo válida cuando la propiedad sin prefijo gane más soporte.

Propiedades de soporte

line-clamp no funciona por sí sola. El elemento debe establecer un flex box y ocultar el desbordamiento:

Propiedad	Por qué es necesaria
`display: -webkit-box`	Cambia el elemento al diseño Flexbox heredado sobre el que se define `line-clamp`.
`-webkit-box-orient: vertical`	Organiza las líneas del contenedor verticalmente para que puedan contarse y recortarse.
`overflow: hidden`	Oculta las líneas que superan el límite; sin esta propiedad el texto se desborda y no aparecen los puntos suspensivos.

Valores

Valor	Descripción
none	Sin número máximo de líneas ni truncamiento.
`<integer>`	Establece el número máximo de líneas antes de truncar el contenido y mostrar puntos suspensivos.

Limitaciones de la propiedad CSS line-clamp

La propiedad es conveniente pero tiene algunas restricciones que vale la pena conocer:

Depende del prefijo -webkit-. En todos los navegadores actuales, la propiedad funcional es -webkit-line-clamp. La versión sin prefijo line-clamp forma parte del CSS Overflow Module Level 4 y está siendo adoptada, pero aún debes declarar la versión con prefijo para mayor compatibilidad.
No se puede personalizar los puntos suspensivos. El carácter de truncamiento es fijo y puede no encajar bien con todos los idiomas o la representación de fuentes.
Requiere varias propiedades de soporte para funcionar — no se puede usar en un elemento de bloque simple:

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

Puedes envolver las reglas en una consulta de características cuando necesites detectar el soporte antes de aplicarlas:

@supports (-webkit-line-clamp: 2) {
  .element {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

Valor inicial	none
Se aplica a	-
Heredable	Sí.
Animable	No.
Versión	CSS Overflow Module Level 4
Sintaxis DOM	object.style.lineClamp = "2";

Advertencia

Nota: display: -webkit-box es una implementación Flexbox heredada y no estándar utilizada por navegadores WebKit antiguos. Se mantiene aquí únicamente como alternativa de compatibilidad.

Temas relacionados

CSS text-overflow — recorta una sola línea con puntos suspensivos.
CSS overflow — controla cómo se muestra u oculta el contenido desbordado.
CSS white-space — gestiona el ajuste de línea, complemento del truncamiento en una sola línea.
CSS overflow-wrap — divide palabras largas para que no se desborden.

Práctica

¿Cuál es la función de line-clamp en CSS?

Se utiliza para aplicar estilos a una línea.Se utiliza para limitar el número de líneas en un bloque de texto.Se utiliza para alinear el texto a lo largo de una línea.Crea un efecto visual de 'sujeción' en el contenido de un elemento restringiendo las líneas de texto mostradas.