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

Типография

line-height

Утилиты для управления интерлиньяжем, или высотой строки, элемента.

ClassStyles
text-<size>/<number>
font-size: <size>; line-height: calc(var(--spacing) * <number>);
text-<size>/(<custom-property>)
font-size: <size>; line-height: var(<custom-property>);
text-<size>/[<value>]
font-size: <size>; line-height: <value>;
leading-none
line-height: 1;
leading-<number>
line-height: calc(var(--spacing) * <number>)
leading-(<custom-property>)
line-height: var(<custom-property>);
leading-[<value>]
line-height: <value>;

Примеры

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

Используйте утилиты размера шрифта типа text-sm/6 и text-lg/7 для одновременной установки размера шрифта и высоты строки элемента:

text-sm/6

Так я начал заходить в воду. Не буду врать вам, ребята, я был в ужасе. Но я продолжал идти, и когда я прошел мимо волн, на меня снизошло странное спокойствие. Не знаю, было ли это божественное вмешательство или родство всех живых существ, но говорю вам, Джерри, в тот момент я был морским биологом.

text-sm/7

Так я начал заходить в воду. Не буду врать вам, ребята, я был в ужасе. Но я продолжал идти, и когда я прошел мимо волн, на меня снизошло странное спокойствие. Не знаю, было ли это божественное вмешательство или родство всех живых существ, но говорю вам, Джерри, в тот момент я был морским биологом.

text-sm/8

Так я начал заходить в воду. Не буду врать вам, ребята, я был в ужасе. Но я продолжал идти, и когда я прошел мимо волн, на меня снизошло странное спокойствие. Не знаю, было ли это божественное вмешательство или родство всех живых существ, но говорю вам, Джерри, в тот момент я был морским биологом.

<p class="text-base/6 ...">Так я начал заходить в воду...</p><p class="text-base/7 ...">Так я начал заходить в воду...</p><p class="text-base/8 ...">Так я начал заходить в воду...</p>

Каждая утилита размера шрифта также устанавливает высоту строки по умолчанию, когда она не предоставлена. Вы можете узнать больше об этих значениях и о том, как их настроить, в документации по размеру шрифта.

Установка независимо

Используйте утилиты leading-<number> типа leading-6 и leading-7 для установки высоты строки элемента независимо от размера шрифта:

leading-6

Так я начал заходить в воду. Не буду врать вам, ребята, я был в ужасе. Но я продолжал идти, и когда я прошел мимо волн, на меня снизошло странное спокойствие. Не знаю, было ли это божественное вмешательство или родство всех живых существ, но говорю вам, Джерри, в тот момент я был морским биологом.

leading-7

Так я начал заходить в воду. Не буду врать вам, ребята, я был в ужасе. Но я продолжал идти, и когда я прошел мимо волн, на меня снизошло странное спокойствие. Не знаю, было ли это божественное вмешательство или родство всех живых существ, но говорю вам, Джерри, в тот момент я был морским биологом.

leading-8

Так я начал заходить в воду. Не буду врать вам, ребята, я был в ужасе. Но я продолжал идти, и когда я прошел мимо волн, на меня снизошло странное спокойствие. Не знаю, было ли это божественное вмешательство или родство всех живых существ, но говорю вам, Джерри, в тот момент я был морским биологом.

<p class="text-sm leading-6">Так я начал заходить в воду...</p><p class="text-sm leading-7">Так я начал заходить в воду...</p><p class="text-sm leading-8">Так я начал заходить в воду...</p>

Удаление интерлиньяжа

Используйте утилиту leading-none для установки высоты строки элемента равной размеру шрифта:

Быстрая коричневая лиса перепрыгивает через ленивую собаку.

<p class="text-2xl leading-none ...">Быстрая коричневая лиса...</p>

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

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

<p class="leading-[1.5] ...">  Lorem ipsum dolor sit amet...</p>

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

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

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

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

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

<p class="leading-5 md:leading-6 ...">  Lorem ipsum dolor sit amet...</p>

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

Кастомизация вашей темы

Утилиты leading-<number> управляются переменной темы --spacing, которую можно настроить в вашей собственной теме:

@theme {  --spacing: 1px; }

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

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