La text-indentproprietà specifica di quanto spazio orizzontale il testo deve essere spostato prima dell'inizio della prima riga del contenuto del testo di un elemento. La spaziatura viene calcolata dal bordo iniziale dell'elemento contenitore a livello di blocco.
Il bordo iniziale è di solito a sinistra, ma può essere destro se in modalità da destra a sinistra, ala la proprietà direction.
La text-indentproprietà viene ereditata quando specificata su un elemento block, il che significa che influenzerà anche gli elementi discendenti inline-block. Quando hai a che fare con bambini in blocco in linea, potresti volerlo forzare text-indent: 0;.
Sintassi
text-indent: | | inherit && ( hanging || each-line ) p ( text-indent: 1.5em; )Un caso d'uso comune sarebbe semplicemente stilistico. Il rientro della prima riga di paragrafi è un po 'antiquato e può evocare quella sensazione. Potrebbe essere usato al posto della spaziatura dopo i paragrafi come indicatore visivo alternativo, sebbene la spaziatura sia probabilmente più leggibile in generale.
Un altro caso d'uso comune è nella "sostituzione dell'immagine" in cui il testo viene espulso dall'elemento tramite rientro del testo e overflow nascosto.
sospeso
hangingè un valore sperimentale e non ufficiale per la text-indentproprietà. Inverte le linee rientrate. Fondamentalmente, fa rientrare ogni riga tranne la prima, risultando in una sorta di punteggiatura sporgente.
Questo valore è una bandiera, che accompagna un valore comune come una lunghezza.
ogni linea
each-lineè un valore sperimentale e non ufficiale per la text-indentproprietà. L'idea è di far rientrare ogni riga dopo un'interruzione di riga forzata (con a
Questo valore è una bandiera, che accompagna un valore comune come una lunghezza.
Demo
Vedere il rientro del testo della penna di Chris Coyier (@chriscoyier) su CodePen.
Supporto browser
Supporto di base
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| qualunque | qualunque | qualunque | 3.5+ | 3+ | qualunque | qualunque |
valore appeso
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| nessuna | nessuna | nessuna | nessuna | nessuna | nessuna | nessuna |
valore di ogni riga
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| nessuna | nessuna | nessuna | nessuna | nessuna | nessuna | nessuna |