DocsBlogGaleríaSociosPlus
  1. Tipografía
  2. line-clamp

Tipografía

line-clamp

Utilidades para limitar el texto a un número específico de líneas.

ClaseEstilos
line-clamp-<number>
overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: <number>;
line-clamp-none
overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: unset;
line-clamp-(<custom-property>)
overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(<custom-property>);
line-clamp-[<value>]
overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: <value>;

Ejemplos

Ejemplo básico

Utiliza utilidades line-clamp-<number> como line-clamp-2 y line-clamp-3 para truncar texto multilínea después de un número específico de líneas:

Aumenta tu tasa de conversión

Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

Lindsay Walton
<article>  <time>Mar 10, 2020</time>  <h2>Aumenta tu tasa de conversión</h2>  <p class="line-clamp-3">    Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut    sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat    dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt    ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur    enim.  </p>  <div>    <img src="/img/lindsay.jpg" />    Lindsay Walton  </div></article>

Deshacer el límite de líneas

Utiliza line-clamp-none para deshacer una utilidad de límite de líneas aplicada anteriormente:

<p class="line-clamp-3 lg:line-clamp-none">  <!-- ... --></p>

Usar un valor personalizado

Usa la sintaxis line-clamp-[<value>] para establecer el/la número de líneas basándose en un valor completamente personalizado:

<p class="line-clamp-[calc(var(--characters)/100)] ...">  Lorem ipsum dolor sit amet...</p>

Para variables CSS, también puedes usar la sintaxis line-clamp-(<custom-property>) :

<p class="line-clamp-(--my-line-count) ...">  Lorem ipsum dolor sit amet...</p>

Esto es solo un atajo para line-clamp-[var(<custom-property>)] que añade la función var() por ti automáticamente.

Diseño responsivo

Antepone a la utilidad line-clamp el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

<div class="line-clamp-3 md:line-clamp-4 ...">  <!-- ... --></div>

Obtén más información sobre el uso de variantes en la documentación de variantes.

En esta página

Copyright © 2026 Tailwind Labs Inc.·Política de marcas registradas