Zamik besedila - CSS-triki

Na text-indentlastnine določa, kako je treba veliko horizontalno prostora besedilo preselili pred začetkom prve vrstice vsebine besedilnega elementa. Razmik se izračuna od začetnega roba elementa vsebnika na ravni bloka.

Začetni rob je običajno na levi, lahko pa je tudi desni, če je v načinu od desne proti levi, ala lastnost smeri.

text-indentLastnost je dedna kadar so namenjeni za skupinsko element, kar pomeni, bo to vplivalo potomec elementov inline-blok kot dobro. Pri obravnavi otrok z vgrajenimi bloki jih boste morda želeli prisiliti text-indent: 0;.

Sintaksa

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

Primer običajne uporabe bi bil preprosto stilističen. Zamik prve vrstice odstavkov je nekako staromoden in lahko vzbudi tak občutek. Namesto razmika za odstavki bi ga lahko uporabili kot alternativni vizualni kazalnik, čeprav je razmik na splošno verjetno bolj berljiv.

Drug pogost primer je "zamenjava slike", kjer se besedilo izloči iz elementa z zamikom besedila in skrije prelivanje.

visi

hangingje eksperimentalna in neuradno vrednost za text-indentznamko. Pretvori, katere vrstice so zamaknjene. V bistvu zamika vsako vrstico, razen prve, kar ima za posledico nekakšna ločila.

Ta vrednost je zastavica, skupaj s skupno vrednostjo, kot je dolžina.

vsaka vrstica

each-lineje eksperimentalna in neuradno vrednost za text-indentznamko. Ideja je, da se vsaka vrstica po prisilnem prelomu vrne (z a
).

Ta vrednost je zastavica, skupaj s skupno vrednostjo, kot je dolžina.

Demo

Glej zamik besedila pisala Chrisa Coyierja (@chriscoyier) na CodePen.

Podpora za brskalnik

Osnovna podpora

Chrome	Safari	Firefox	Opera	IE	Android	iOS
kaj	kaj	kaj	3,5+	3+	kaj	kaj

viseča vrednost

Chrome	Safari	Firefox	Opera	IE	Android	iOS
nobenega	nobenega	nobenega	nobenega	nobenega	nobenega	nobenega

vrednost vsake vrstice

Chrome	Safari	Firefox	Opera	IE	Android	iOS
nobenega	nobenega	nobenega	nobenega	nobenega	nobenega	nobenega