Tipografía
Utilidades para controlar la cantidad de espacio vacío que se muestra antes del texto en un bloque.
| Clase | Estilos |
|---|---|
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>; |
Usa utilidades indent-<number> como indent-2 y indent-8 para establecer la cantidad de espacio vacío (sangría) que se muestra antes del texto en un bloque:
Así que empecé a adentrarme en el agua. No les voy a mentir muchachos, estaba aterrorizado. Pero seguí adelante, y a medida que avanzaba más allá de las olas, una extraña calma se apoderó de mí. No sé si fue una intervención divina o el parentesco de todos los seres vivos, pero te digo Jerry, en ese momento, yo era un biólogo marino.
<p class="indent-8">Así que empecé a adentrarme en el agua...</p>Para usar un valor de sangría de texto negativo, añade un guion como prefijo al nombre de la clase para convertirlo en un valor negativo:
Así que empecé a adentrarme en el agua. No les voy a mentir muchachos, estaba aterrorizado. Pero seguí adelante, y a medida que avanzaba más allá de las olas, una extraña calma se apoderó de mí. No sé si fue una intervención divina o el parentesco de todos los seres vivos, pero te digo Jerry, en ese momento, yo era un biólogo marino.
<p class="-indent-8">Así que empecé a adentrarme en el agua...</p>Usa la sintaxis indent-[<value>] para establecer el/la text indentation basándose en un valor completamente personalizado:
<p class="indent-[50%] ..."> Lorem ipsum dolor sit amet...</p>Para variables CSS, también puedes usar la sintaxis indent-(<custom-property>) :
<p class="indent-(--my-indentation) ..."> Lorem ipsum dolor sit amet...</p>Esto es solo un atajo para indent-[var(<custom-property>)] que añade la función var() por ti automáticamente.
Antepone a la utilidad text-indent el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<p class="indent-4 md:indent-8 ..."> Lorem ipsum dolor sit amet...</p>Obtén más información sobre el uso de variantes en la documentación de variantes.