A text-indentpropriedade especifica quanto texto de espaço horizontal deve ser movido antes do início da primeira linha do conteúdo de texto de um elemento. O espaçamento é calculado a partir da borda inicial do elemento de contêiner de nível de bloco.
A borda inicial geralmente está à esquerda, mas pode estar à direita se estiver no modo da direita para a esquerda, como a propriedade direction.
A text-indentpropriedade é herdada quando especificada em um elemento de bloco, o que significa que também afetará os elementos descendentes do bloco embutido. Ao lidar com filhos de bloqueio inline, você pode forçá-los a isso text-indent: 0;.
Sintaxe
text-indent: | | inherit && ( hanging || each-line ) p ( text-indent: 1.5em; )Um caso de uso comum seria simplesmente estilístico. Recuar a primeira linha dos parágrafos é meio antiquado e pode evocar essa sensação. Ele poderia ser usado no lugar do espaçamento após os parágrafos como um indicador visual alternativo, embora o espaçamento seja provavelmente mais legível em geral.
Outro caso de uso comum é em “substituição de imagem”, em que o texto é expulso do elemento por meio de recuo de texto e estouro oculto.
pendurado
hangingé um valor experimental e não oficial para a text-indentpropriedade. Ele inverte quais linhas são indentadas. Basicamente, ele recua todas as linhas, exceto a primeira, resultando em algum tipo de pontuação deslocada.
Este valor é um sinalizador, junto com um valor comum, como um comprimento.
cada linha
each-lineé um valor experimental e não oficial para a text-indentpropriedade. A ideia é indentar cada linha após uma quebra de linha forçada (com um
Este valor é um sinalizador, junto com um valor comum, como um comprimento.
Demo
Veja o recuo de texto da caneta por Chris Coyier (@chriscoyier) no CodePen.
Suporte para navegador
Suporte básico
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| nenhum | nenhum | nenhum | 3,5+ | 3+ | nenhum | nenhum |
valor pendurado
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Nenhum | Nenhum | Nenhum | Nenhum | Nenhum | Nenhum | Nenhum |
valor de cada linha
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Nenhum | Nenhum | Nenhum | Nenhum | Nenhum | Nenhum | Nenhum |