Te text-indentokreśla własności, ile miejsca na tekst poziomy powinny zostać przeniesione przed rozpoczęciem pierwszej linii zawartości tekstowej elementu. Odstęp jest obliczany od krawędzi początkowej elementu kontenera na poziomie bloku.
Krawędź początkowa znajduje się zwykle po lewej stronie, ale może być prawa w trybie od prawej do lewej, ala właściwość direction.
text-indentWłaściwość jest dziedziczona, gdy podana na elemencie blokowym, co oznacza, że wpływ elementy podrzędne inline bloku, jak również. Kiedy masz do czynienia z dziećmi z blokami inline, możesz je do tego zmusić text-indent: 0;.
Składnia
text-indent: | | inherit && ( hanging || each-line ) p ( text-indent: 1.5em; )Typowy przypadek użycia byłby po prostu stylistyczny. Wcięcie pierwszego wiersza akapitu jest trochę staroświeckie i może wywołać to uczucie. Można go użyć zamiast odstępów po akapitach jako alternatywnego wskaźnika wizualnego, chociaż odstępy są prawdopodobnie ogólnie bardziej czytelne.
Innym częstym przypadkiem użycia jest „zamiana obrazu”, gdzie tekst jest wyrzucany z elementu poprzez wcięcie tekstu i ukryte przepełnienie.
wiszące
hangingJest to eksperymentalny i nieoficjalny wartość dla text-indentnieruchomości. Odwraca, które wiersze są wcięte. Zasadniczo wcina każdy wiersz z wyjątkiem pierwszego, co powoduje powstanie wiszącej interpunkcji.
Ta wartość jest flagą, która ma wspólną wartość, taką jak długość.
w każdej linii
each-lineJest to eksperymentalny i nieoficjalny wartość dla text-indentnieruchomości. Chodzi o to, aby wciąć każdy wiersz po wymuszonym przerwaniu wiersza (za pomocą
Ta wartość jest flagą, która ma wspólną wartość, taką jak długość.
Próbny
Zobacz wcięcie tekstu pisaka autorstwa Chrisa Coyiera (@chriscoyier) w CodePen.
Wsparcie przeglądarki
Podstawowe wsparcie
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| każdy | każdy | każdy | 3.5+ | 3+ | każdy | każdy |
wartość wisząca
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| Żaden | Żaden | Żaden | Żaden | Żaden | Żaden | Żaden |
wartość w każdym wierszu
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| Żaden | Żaden | Żaden | Żaden | Żaden | Żaden | Żaden |