Teks-inden - Trik CSS

Yang text-indentdinyatakan oleh harta berapa banyak teks ruang mendatar perlu dipindahkan sebelum permulaan baris pertama kandungan teks unsur. Jarak dikira dari tepi permulaan elemen kontena tahap blok.

Tepi permulaan biasanya di sebelah kiri, tetapi boleh ke kanan jika dalam mod kanan ke kiri, seperti sifat arah.

The text-indentharta diwarisi apabila dinyatakan pada elemen blok, yang cara ia akan memberi kesan unsur-unsur keturunan inline-block juga. Semasa berhadapan dengan kanak-kanak blok inline, anda mungkin mahu memaksanya text-indent: 0;.

Sintaks

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

Kes penggunaan biasa hanyalah gaya. Menggantung baris pertama perenggan adalah kuno dan dapat membangkitkan rasa itu. Ini dapat digunakan sebagai pengganti jarak setelah perenggan sebagai petunjuk visual alternatif, walaupun jarak mungkin lebih mudah dibaca secara umum.

Kes penggunaan umum yang lain adalah dalam "penggantian gambar" di mana teks dikeluarkan dari elemen melalui teks-indent dan limpahan tersembunyi.

menggantung

hangingadalah nilai eksperimen dan tidak rasmi untuk text-indentharta tanah. Ia membalikkan garis mana yang digerakkan. Pada dasarnya, ia menandakan setiap baris kecuali yang pertama, menghasilkan semacam tanda baca-tanda baca.

Nilai ini adalah bendera, sesuai dengan nilai umum seperti panjang.

setiap baris

each-lineadalah nilai eksperimen dan tidak rasmi untuk text-indentharta tanah. Ideanya adalah untuk membuat lekukan setiap baris setelah pemutusan garis paksa (dengan a
).

Nilai ini adalah bendera, sesuai dengan nilai umum seperti panjang.

Demo

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

Sokongan Penyemak Imbas

Sokongan asas

Chrome	Safari	Firefox	Opera	IE	Android	iOS
ada	ada	ada	3.5+	3+	ada	ada

nilai gantung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
tiada	tiada	tiada	tiada	tiada	tiada	tiada

nilai setiap baris

Chrome	Safari	Firefox	Opera	IE	Android	iOS
tiada	tiada	tiada	tiada	tiada	tiada	tiada