La text-indentpropiedad especifica cuánto espacio horizontal se debe mover el texto antes del comienzo de la primera línea del contenido de texto de un elemento. El espaciado se calcula desde el borde inicial del elemento contenedor a nivel de bloque.
El borde inicial suele estar a la izquierda, pero puede estar a la derecha si está en el modo de derecha a izquierda, según la propiedad de dirección.
La text-indentpropiedad se hereda cuando se especifica en un elemento de bloque, lo que significa que también afectará a los elementos descendientes de bloques en línea. Cuando se trata de niños con bloques en línea, es posible que desee obligarlos a hacerlo text-indent: 0;.
Sintaxis
text-indent: | | inherit && ( hanging || each-line ) p ( text-indent: 1.5em; )Un caso de uso común sería simplemente estilístico. Sangrar la primera línea de los párrafos es algo anticuado y puede evocar esa sensación. Podría usarse en lugar del espacio después de los párrafos como un indicador visual alternativo, aunque el espacio probablemente sea más legible en general.
Otro caso de uso común es el de "reemplazo de imagen", donde el texto se expulsa del elemento mediante sangría de texto y desbordamiento oculto.
colgante
hangingEs un valor experimental y no oficial de la text-indentpropiedad. Invierte qué líneas están sangradas. Básicamente, sangra todas las líneas excepto la primera, lo que resulta en una especie de puntuación colgante.
Este valor es una bandera, junto con un valor común como una longitud.
cada línea
each-lineEs un valor experimental y no oficial de la text-indentpropiedad. La idea es sangrar cada línea después de un salto de línea forzado (con a
Este valor es una bandera, junto con un valor común como una longitud.
Manifestación
Consulte la sangría de texto de Pen de Chris Coyier (@chriscoyier) en CodePen.
Soporte del navegador
Soporte básico
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| alguna | alguna | alguna | 3.5+ | 3+ | alguna | alguna |
valor colgante
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| ninguno | ninguno | ninguno | ninguno | ninguno | ninguno | ninguno |
valor de cada línea
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| ninguno | ninguno | ninguno | ninguno | ninguno | ninguno | ninguno |