Par text-indent
īpašuma precizē, cik horizontālo vietas teksts jāpārvieto pirms sākuma pirmās rindiņas teksta satura elementa. Atstarpes tiek aprēķinātas no bloka līmeņa konteinera elementa sākuma malas.
Sākuma mala parasti atrodas kreisajā pusē, bet var būt labā, ja režīmā no labās uz kreiso ir vērsta virziena īpašība.
text-indent
Īpašums tiek mantots, ja norādīts uz bloka elements, kas nozīmē, ka tas ietekmēs inline-block pēcnācējs elementus, kā arī. Nodarbojoties ar bērniem, kuri bloķē iekšējo bloku, jūs varat tos piespiest text-indent: 0;
.
Sintakse
text-indent: | | inherit && ( hanging || each-line ) p ( text-indent: 1.5em; )
Bieži lietots gadījums būtu vienkārši stilistisks. Rindkopu pirmās rindas ievilkšana ir vecmodīga un var izraisīt šo sajūtu. To varētu izmantot atstarpes aiz rindkopām vietā kā alternatīvu vizuālo rādītāju, lai gan atstarpe, iespējams, kopumā ir lasāmāka.
Vēl viens izplatīts izmantošanas gadījums ir “attēla nomaiņa”, kur teksts tiek izstumts no elementa, izmantojot teksta ievilkumu un slēptu pārpildi.
karājas
hanging
ir eksperimentāls un neoficiāls vērtību par text-indent
īpašumu. Tas apgriež, kuras līnijas ir ievilktas. Būtībā tas atkāpjas katrā rindā, izņemot pirmo, kā rezultātā tiek izveidoti kaut kādi pakārt-pieturzīmes.
Šī vērtība ir karodziņš, kas iet kopā ar tādu kopēju vērtību kā garums.
katra rinda
each-line
ir eksperimentāls un neoficiāls vērtību par text-indent
īpašumu. Ideja ir ievilkt katru līniju pēc piespiedu līnijas pārtraukuma (ar a
).
Šī vērtība ir karodziņš, kas iet kopā ar tādu kopēju vērtību kā garums.
Demonstrācija
Skatiet Krista Koijera (@chriscoyier) Pildspalvas teksta ievilkumu vietnē CodePen.
Pārlūka atbalsts
Pamata atbalsts
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
jebkurš | jebkurš | jebkurš | 3,5+ | 3+ | jebkurš | jebkurš |
karājas vērtība
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
neviena | neviena | neviena | neviena | neviena | neviena | neviena |
katras rindas vērtība
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
neviena | neviena | neviena | neviena | neviena | neviena | neviena |