Teksti taane - CSS-trikid

text-indentVara täpsustab, kui palju rõhttühiku teksti tuleb viia enne algust esimesel real teksti sisu element. Vahemaa arvutatakse plokitaseme mahuti elemendi algservast.

Algserv on tavaliselt vasakul, kuid paremal-vasakul režiimis võib olla parem, kui suund on omadus.

text-indentVara on päritud, kui märgitud ploki element, mis tähendab, et see mõjutab inline-block järeltulija elemendid samuti. Inline-blokeerivate lastega tegeledes võiksite neid sundida text-indent: 0;.

Süntaks

text-indent: | | inherit && ( hanging || each-line ) p ( text-indent: 1.5em; )

Üldkasutatav juhtum oleks lihtsalt stiililine. Lõigude esimese rea taandamine on omamoodi vanamoodne ja võib seda tunnet esile kutsuda. Seda võiks kasutada lõigujärgse tühiku asemel alternatiivse visuaalse indikaatorina, ehkki vahed on ilmselt üldiselt loetavamad.

Teine levinud kasutusjuht on „pildi asendamine”, kus tekst visatakse elemendist välja teksti taande ja peidetud ülevoolu kaudu.

rippuvad

hangingon eksperimentaalne ja mitteametlik raha eest text-indentvara. See pöörab ümber, millised jooned on taandatud. Põhimõtteliselt taandab see kõiki ridu, välja arvatud esimene, mille tulemuseks on mingisugune riputamine-kirjavahemärgid.

See väärtus on lipp koos ühise väärtusega nagu pikkus.

iga rida

each-lineon eksperimentaalne ja mitteametlik raha eest text-indentvara. Idee on taandada iga rida pärast sunnitud joone katkemist (tähega a
).

See väärtus on lipp koos ühise väärtusega nagu pikkus.

Demo

Vaadake CodePenil Chris Coyieri (@chriscoyier) pliiatsi teksti taandet.

Brauseri tugi

Põhiline tugi

Chrome	Safari	Firefox	Ooper	IE	Android	iOS
mis tahes	mis tahes	mis tahes	3,5+	3+	mis tahes	mis tahes

rippuv väärtus

Chrome	Safari	Firefox	Ooper	IE	Android	iOS
mitte ühtegi	mitte ühtegi	mitte ühtegi	mitte ühtegi	mitte ühtegi	mitte ühtegi	mitte ühtegi

iga rea ​​väärtus

Chrome	Safari	Firefox	Ooper	IE	Android	iOS
mitte ühtegi	mitte ühtegi	mitte ühtegi	mitte ühtegi	mitte ühtegi	mitte ühtegi	mitte ühtegi