De text-indentegenskapen anger hur mycket horisontellt utrymme text bör flyttas före början av den första raden av innehållet i ett element text. Avstånd beräknas från startkanten på blocknivåbehållarelementet.
Startkanten är vanligtvis till vänster, men kan vara rätt om den är i höger-till-vänster-läge, ala riktningsegenskapen.
Den text-indentegenskapen ärvs när den är specificerad på en blockelement, vilket betyder att det kommer att påverka inline-block ordnade element också. När du arbetar med inline-blockerade barn kanske du vill tvinga dem att göra det text-indent: 0;.
Syntax
text-indent: | | inherit && ( hanging || each-line ) p ( text-indent: 1.5em; )Ett vanligt användningsfall skulle vara helt enkelt stilistiskt. Indragning av den första raden i stycken är typ av gammaldags och kan väcka den känslan. Den kan användas i stället för avstånd efter stycken som en alternativ visuell indikator, även om avstånd förmodligen är mer läsbart i allmänhet.
Ett annat vanligt användningsfall är i "bildbyte" där text sparkas ur element via textindrag och dold överflöd.
hängande
hangingär ett experimentellt och inofficiellt värde för text-indentfastigheten. Det inverterar vilka linjer som är indragna. I grund och botten indrycker det varje rad utom den första, vilket resulterar i någon form av hängning-skiljetecken.
Detta värde är en flagga som följer med ett gemensamt värde som en längd.
varje linje
each-lineär ett experimentellt och inofficiellt värde för text-indentfastigheten. Tanken är att dra in varje rad efter ett tvångsbrott (med a
Detta värde är en flagga som följer med ett gemensamt värde som en längd.
Demo
Se pennens textindrag av Chris Coyier (@chriscoyier) på CodePen.
Webbläsarstöd
Grundläggande stöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| några | några | några | 3,5+ | 3+ | några | några |
hängande värde
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| ingen | ingen | ingen | ingen | ingen | ingen | ingen |
värde för varje rad
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| ingen | ingen | ingen | ingen | ingen | ingen | ingen |