Uvlaka teksta - CSS-trikovi

U text-indentvlasništva propisuje koliko horizontalni razmak tekst treba premjestiti prije početka prvog retka tekstualni sadržaj elementa. Razmak se izračunava od početnog ruba elementa spremnika na razini bloka.

Početni rub je obično s lijeve strane, ali može biti i desni ako je u modu zdesna nalijevo, ali svojstvo smjera.

text-indentObjekt je naslijedio kada je navedeno na blok elementa, što znači da će utjecati na inline-blok potomak elemente kao dobro. Kada imate posla s djecom s ugrađenim blokovima, možda ćete ih htjeti prisiliti text-indent: 0;.

Sintaksa

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

Slučaj uobičajene upotrebe bio bi jednostavno stilski. Uvlačenje prvog retka odlomaka nekako je staromodno i može pobuditi taj osjećaj. Mogao bi se koristiti umjesto razmaka nakon odlomaka kao alternativni vizualni pokazatelj, iako je razmak vjerojatno čitljiviji općenito.

Sljedeći uobičajeni slučaj je "zamjena slike" gdje se tekst izbacuje iz elementa uvlačenjem teksta i skriva prelijevanje.

vješanje

hangingje eksperimentalna i neslužbena vrijednost za text-indentimovinu. Obrne koje su linije uvučene. U osnovi, uvlači svaki redak, osim prvog, što rezultira nekom vrstom interpunkcije.

Ova je vrijednost zastavica, koja ide uz zajedničku vrijednost poput duljine.

svaki redak

each-lineje eksperimentalna i neslužbena vrijednost za text-indentimovinu. Ideja je uvući svaki redak nakon prisilnog prekida retka (s a
).

Ova je vrijednost zastavica, koja ide uz zajedničku vrijednost poput duljine.

Demo

Pogledajte uvlaku teksta olovke Chrisa Coyiera (@chriscoyier) na CodePenu.

Podrška preglednika

Osnovna podrška

Krom	Safari	Firefox	Opera	IE	Android	iOS
bilo koji	bilo koji	bilo koji	3,5+	3+	bilo koji	bilo koji

visi vrijednost

Krom	Safari	Firefox	Opera	IE	Android	iOS
nijedna	nijedna	nijedna	nijedna	nijedna	nijedna	nijedna

vrijednost svake retke

Krom	Safari	Firefox	Opera	IE	Android	iOS
nijedna	nijedna	nijedna	nijedna	nijedna	nijedna	nijedna