Playground de text-indent en CSS

Explora text-indent con controles para sangrar la primera línea de un bloque, cambiar la dirección del texto y probar los keywords hanging y each-line.

BaselineLab muestra text-indent en la primera línea de un bloque para que puedas medir la entrada del párrafo.
Esta línea aparece después de un salto forzado y permite comprobar el efecto de each-line.
Con hanging activado se invierte la lógica: las líneas posteriores reciben la sangría y la primera queda al borde.

HTML

<p class="text-indent-sample" dir="ltr">
  BaselineLab muestra text-indent en la primera línea de un bloque para que puedas medir la entrada del párrafo.<br>
  Esta línea aparece después de un salto forzado y permite comprobar el efecto de each-line.<br>
  Con hanging activado se invierte la lógica: las líneas posteriores reciben la sangría y la primera queda al borde.
</p>

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

<p class="max-inline-xl text-lg leading-7 indent-8" dir="ltr">
  BaselineLab muestra text-indent en la primera línea de un bloque para que puedas medir la entrada del párrafo.<br>
  Esta línea aparece después de un salto forzado y permite comprobar el efecto de each-line.<br>
  Con hanging activado se invierte la lógica: las líneas posteriores reciben la sangría y la primera queda al borde.
</p>

CSS

.text-indent-sample {
  max-inline-size: 36rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  text-indent: 2rem;
}