Odrážka textu - Triky CSS

K text-indentvlastnictví určuje, jak má být mnohem horizontální prostor pro text přesunut před začátkem prvního řádku textového obsahu elementu. Mezery se počítají od počáteční hrany prvku kontejneru na úrovni bloku.

Počáteční hrana je obvykle vlevo, ale může být vpravo, pokud je v režimu zprava doleva ala vlastnost směru.

text-indentVlastnost se dědí-li určeny k bloku prvku, což znamená, že bude mít vliv na inline-blok potomka prvků stejně. Když jednáte s dětmi s blokováním inline, můžete je přinutit text-indent: 0;.

Syntax

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

Běžný případ použití by byl jednoduše stylistický. Odsazení prvního řádku odstavců je trochu staromódní a může tento pocit vyvolat. Mohlo by to být použito místo mezer za odstavci jako alternativní vizuální indikátor, ačkoli mezery jsou pravděpodobně obecně čitelnější.

Dalším běžným případem použití je „nahrazení obrazu“, kdy je text vykopnut z prvku pomocí odsazení textu a skrytého přetečení.

závěsný

hangingje experimentální a neoficiální hodnota pro text-indentvlastnost. Invertuje, které řádky jsou odsazeny. V zásadě to odsadí každý řádek kromě prvního, což má za následek nějaký druh interpunkce.

Tato hodnota je příznak, který jde spolu se společnou hodnotou, jako je délka.

každý řádek

each-lineje experimentální a neoficiální hodnota pro text-indentvlastnost. Myšlenkou je odsazení každého řádku po vynuceném přerušení řádku (s a
).

Tato hodnota je příznak, který jde spolu se společnou hodnotou, jako je délka.

Ukázka

Podívejte se na textovou odrážku Pen od Chrisa Coyiera (@chriscoyier) na CodePen.

Podpora prohlížeče

Základní podpora

Chrome	Safari	Firefox	Opera	TJ	Android	iOS
žádný	žádný	žádný	3,5+	3+	žádný	žádný

visící hodnota

Chrome	Safari	Firefox	Opera	TJ	Android	iOS
žádný	žádný	žádný	žádný	žádný	žádný	žádný

hodnota každého řádku

Chrome	Safari	Firefox	Opera	TJ	Android	iOS
žádný	žádný	žádný	žádný	žádný	žádný	žádný