1. Типография
  2. line-clamp

Типография

line-clamp

Утилиты для ограничения текста определенным количеством строк.

ClassStyles
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>;

Примеры

Базовый пример

Используйте утилиты line-clamp-<number> типа line-clamp-2 и line-clamp-3 для обрезки многострочного текста после определенного количества строк:

Повысьте конверсию

Нulla 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.

Линдси Уолтон
<article>  <time>10 марта 2020</time>  <h2>Повысьте конверсию</h2>  <p class="line-clamp-3">    Нulla 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" />    Линдси Уолтон  </div></article>

Отмена ограничения строк

Используйте line-clamp-none для отмены ранее примененной утилиты ограничения строк:

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

Использование пользовательского значения

Используйте синтаксис line-clamp-[<value>] , чтобы задать number of lines на основе полностью пользовательского значения:

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

Для переменных CSS вы также можете использовать синтаксис: line-clamp-(<custom-property>)

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

Это просто сокращение, line-clamp-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс a line-clamp утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

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

Подробнее об использовании вариантов читайте в документации по вариантам.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков