Zarážka textu - Triky CSS

Táto text-indentvlastnosť určuje, koľko textu v horizontálnom priestore by sa malo presunúť pred začiatok prvého riadku textového obsahu prvku. Medzery sa počítajú od začiatočnej hrany prvku kontajnera na úrovni bloku.

Počiatočná hrana je zvyčajne vľavo, ale môže byť pravá, ak je v režime sprava doľava ala vlastnosť smeru.

text-indentVlastnosť sa dedia ak sú určené k bloku prvku, čo znamená, že bude mať vplyv na inline-blok potomka prvkov rovnako. Pri jednaní s blokovanými deťmi môžete byť prinútený text-indent: 0;.

Syntax

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

Bežný prípad použitia by bol jednoducho štylistický. Odsadenie prvého riadku odsekov je akési staromódne a môže tento pocit vyvolať. Môže sa použiť namiesto medzery za odsekmi ako alternatívny vizuálny indikátor, hoci medzery sú pravdepodobne všeobecne čitateľnejšie.

Ďalším bežným prípadom použitia je „nahradenie obrázka“, keď je text vykopnutý z prvku pomocou odsadenia textu a skrytého pretečenia.

obesenie

hangingje experimentálna a neoficiálna hodnota pre text-indentnehnuteľnosť. Invertuje, ktoré riadky sú odsadené. V zásade to odsadí každý riadok okrem prvého, čo vedie k nejakému druhu interpunkcie.

Táto hodnota je príznakom, ktorý má spoločnú hodnotu ako dĺžka.

každý riadok

each-lineje experimentálna a neoficiálna hodnota pre text-indentnehnuteľnosť. Cieľom je odsadiť každý riadok po vynútenom zalomení riadku (pomocou a
).

Táto hodnota je príznakom, ktorý má spoločnú hodnotu ako dĺžka.

Ukážka

Prečítajte si zarážku textu Pen, ktorú napísal Chris Coyier (@chriscoyier) na stránke CodePen.

Podpora prehľadávača

Základná podpora

Chrome	Safari	Firefox	Opera	IE	Android	iOS
akýkoľvek	akýkoľvek	akýkoľvek	3,5+	3+	akýkoľvek	akýkoľvek

závesná hodnota

Chrome	Safari	Firefox	Opera	IE	Android	iOS
žiadny	žiadny	žiadny	žiadny	žiadny	žiadny	žiadny

hodnota každého riadku

Chrome	Safari	Firefox	Opera	IE	Android	iOS
žiadny	žiadny	žiadny	žiadny	žiadny	žiadny	žiadny