Типография
Утилиты для управления количеством пустого пространства, отображаемого перед текстом в блоке.
| Class | Styles |
|---|---|
indent-<number> | text-indent: calc(var(--spacing) * <number>) |
-indent-<number> | text-indent: calc(var(--spacing) * -<number>) |
indent-px | text-indent: 1px; |
-indent-px | text-indent: -1px; |
indent-(<custom-property>) | text-indent: var(<custom-property>); |
indent-[<value>] | text-indent: <value>; |
Используйте утилиты indent-<number> типа indent-2 и indent-8 для установки количества пустого пространства (отступа), которое отображается перед текстом в блоке:
Так я начал заходить в воду. Не буду врать вам, ребята, я был в ужасе. Но я продолжал идти, и когда я прошел мимо волн, на меня снизошло странное спокойствие. Не знаю, было ли это божественное вмешательство или родство всех живых существ, но говорю вам, Джерри, в тот момент я был морским биологом.
<p class="indent-8">Так я начал заходить в воду...</p>Для использования отрицательного значения отступа текста добавьте дефис перед именем класса, чтобы преобразовать его в отрицательное значение:
Так я начал заходить в воду. Не буду врать вам, ребята, я был в ужасе. Но я продолжал идти, и когда я прошел мимо волн, на меня снизошло странное спокойствие. Не знаю, было ли это божественное вмешательство или родство всех живых существ, но говорю вам, Джерри, в тот момент я был морским биологом.
<p class="-indent-8">Так я начал заходить в воду...</p>Используйте синтаксис indent-[<value>] , чтобы задать text indentation на основе полностью пользовательского значения:
<p class="indent-[50%] ..."> Lorem ipsum dolor sit amet...</p>Для переменных CSS вы также можете использовать синтаксис: indent-(<custom-property>)
<p class="indent-(--my-indentation) ..."> Lorem ipsum dolor sit amet...</p>Это просто сокращение, indent-[var(<custom-property>)] которое автоматически добавляет функцию var().
Префикс a text-indent утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<p class="indent-4 md:indent-8 ..."> Lorem ipsum dolor sit amet...</p>Подробнее об использовании вариантов читайте в документации по вариантам.