Den text-indentegenskapen angir hvor mye horisontal plass teksten skal flyttes før begynnelsen av den første linjen i teksten innholdet av et element. Avstand beregnes fra startkanten av beholderelementet på blokknivå.
Startkanten er vanligvis til venstre, men kan være høyre hvis den er i høyre mot venstre-modus, ala retningsegenskapen.
Den text-indentegenskapen arves når den er spesifisert på en blokk-element, noe som betyr at det vil påvirke inline-blokkkommer elementer også. Når du arbeider med inline-block-barn, vil du kanskje tvinge dem til det text-indent: 0;.
Syntaks
text-indent: | | inherit && ( hanging || each-line ) p ( text-indent: 1.5em; )En vanlig brukstilfelle ville være ganske enkelt stilistisk. Innrykk på første linje med avsnitt er litt gammeldags og kan fremkalle den følelsen. Den kan brukes i stedet for avstand etter avsnitt som en alternativ visuell indikator, selv om avstand sannsynligvis er mer lesbar generelt.
En annen vanlig brukssak er i “image replacement” der tekst blir sparket ut av element via tekstinnrykk og skjult overløp.
hengende
hanginger en eksperimentell og uoffisiell verdi for text-indenteiendommen. Den inverterer hvilke linjer som er innrykket. I utgangspunktet innrykker den hver linje unntatt den første, noe som resulterer i en slags hengende tegnsetting.
Denne verdien er et flagg som følger med en felles verdi som en lengde.
hver linje
each-lineer en eksperimentell og uoffisiell verdi for text-indenteiendommen. Tanken er å innrykke hver linje etter et tvunget linjeskift (med a
Denne verdien er et flagg som følger med en felles verdi som en lengde.
Demo
Se pennens tekstinnrykk av Chris Coyier (@chriscoyier) på CodePen.
Nettleserstøtte
Grunnleggende støtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| noen | noen | noen | 3.5+ | 3+ | noen | noen |
hengende verdi
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| ingen | ingen | ingen | ingen | ingen | ingen | ingen |
verdi for hver linje
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| ingen | ingen | ingen | ingen | ingen | ingen | ingen |