Teks-indentasi - Trik CSS

The text-indentmenspesifikasikan properti berapa banyak teks ruang horisontal harus dipindahkan sebelum awal baris pertama dari isi teks dari suatu unsur. Jarak dihitung dari tepi awal elemen penampung tingkat blok.

Tepi awal biasanya ada di kiri, tetapi bisa jadi kanan jika dalam mode kanan-ke-kiri, ala properti arah.

The text-indentproperti diwariskan ketika ditentukan pada elemen blok, yang berarti hal itu akan mempengaruhi unsur-unsur keturunan inline-block juga. Saat berurusan dengan anak-anak blok-inline, Anda mungkin ingin memaksa mereka text-indent: 0;.

Sintaksis

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

Kasus penggunaan yang umum adalah gaya. Memasukkan baris pertama paragraf sudah kuno dan bisa membangkitkan perasaan itu. Ini dapat digunakan sebagai pengganti spasi setelah paragraf sebagai indikator visual alternatif, meskipun spasi mungkin lebih mudah dibaca secara umum.

Kasus penggunaan umum lainnya adalah dalam "penggantian gambar" di mana teks dikeluarkan dari elemen melalui indentasi teks dan luapan tersembunyi.

gantung

hangingadalah nilai eksperimental dan tidak resmi untuk text-indentproperti. Ini membalikkan baris mana yang diindentasi. Pada dasarnya, ini membuat indentasi setiap baris kecuali yang pertama, menghasilkan semacam tanda baca gantung.

Nilai ini adalah sebuah bendera, mengikuti nilai umum seperti panjang.

setiap baris

each-lineadalah nilai eksperimental dan tidak resmi untuk text-indentproperti. Idenya adalah membuat indentasi setiap baris setelah pemutusan baris paksa (dengan a
).

Nilai ini adalah sebuah bendera, mengikuti nilai umum seperti panjang.

Demo

Lihat indentasi teks Pena oleh Chris Coyier (@chriscoyier) di CodePen.

Dukungan Browser

Dukungan dasar

Chrome	Safari	Firefox	Opera	YAITU	Android	iOS
apa saja	apa saja	apa saja	3.5+	3+	apa saja	apa saja

nilai gantung

Chrome	Safari	Firefox	Opera	YAITU	Android	iOS
tidak ada	tidak ada	tidak ada	tidak ada	tidak ada	tidak ada	tidak ada

nilai setiap baris

Chrome	Safari	Firefox	Opera	YAITU	Android	iOS
tidak ada	tidak ada	tidak ada	tidak ada	tidak ada	tidak ada	tidak ada