DocsBlogShowcasePlus
  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

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

Boost your conversion rate

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>Boost your conversion rate</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>

Deshaciendo el límite de líneas

Usa line-clamp-none para deshacer una utilidad de límite de líneas aplicada previamente:

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

Usando un valor personalizado

Usa la sintaxis line-clamp-[<value>] para establecer el number of lines basado 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 agrega la función var() por ti automáticamente.

Responsive design

Prefija una utilidad line-clamp con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

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

Aprende más sobre el uso de variantes en la documentación de variantes.

En esta página

Copyright © 2025 Tailwind Labs Inc.·Política de Marca Registrada