Indentasi dimulai dari baris kedua paragraf dengan CSS

Bagaimana cara saya membuat indentasi mulai dari baris kedua paragraf?

Saya sudah mencoba

p {
    text-indent: 200px;
}
p:first-line {
    text-indent: 0;
}

dan

p {
    margin-left: 200px;
}
p:first-line {
    margin-left: 0;
}

dan

(with position:relative;)
p {
    left: 200px;
}
p:first-line {
    left: 0;
}

Apakah secara harfiah hanya baris kedua yang ingin Anda inden, atau dari baris kedua (mis. Inden gantung )?

Jika yang terakhir, sesuatu yang sejalan dengan JSFiddle ini akan sesuai.

    div {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }
    
    span {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</span>

Contoh ini menunjukkan bagaimana menggunakan sintaks CSS yang sama dalam DIV atau SPAN menghasilkan efek yang berbeda.

Membuat margin kiri: 2em atau lebih akan mendorong seluruh teks termasuk baris pertama ke kanan 2em. Kemudian tambahkan teks-indentasi (berlaku untuk baris pertama) sebagai -2em atau lebih .. Ini membawa baris pertama kembali ke awal tanpa margin. Saya mencobanya untuk tag daftar

<style>
    ul li{
      margin-left: 2em;
      text-indent: -2em;
    }
</style>

Ini berhasil untuk saya:

p { margin-left: -2em; 
 text-indent: 2em 
 }

Saya perlu membuat indentasi dua baris untuk memungkinkan kata pertama yang lebih besar dalam para. Solusi satu kali yang tidak praktis adalah menempatkan teks dalam elemen SVG dan memposisikannya sama dengan <img>. Menggunakan float dan tag tinggi SVG menentukan berapa banyak baris yang akan diindentasi, misalnya

<p style="color: blue; font-size: large; padding-top: 4px;">
<svg height="44" width="260" style="float:left;margin-top:-8px;"><text x="0" y="36" fill="blue" font-family="Verdana" font-size="36">Lorum Ipsum</text></svg> 
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

• Tinggi dan lebar SVG menentukan area yang diblokir.
• Y = 36 adalah kedalaman garis dasar teks SVG dan sama dengan ukuran font
• margin-top memungkinkan penyelarasan terbaik dari teks SVG dan teks para
• Digunakan dua kata pertama di sini untuk mengingatkan perawatan yang dibutuhkan untuk keturunan

Ya itu rumit tetapi juga tidak tergantung pada lebar div yang mengandung.

Jawaban di atas adalah untuk pertanyaan saya sendiri agar kata pertama dari para menjadi lebih besar dan diposisikan di atas dua baris. Untuk membuat indentasi dua baris pertama para, Anda dapat mengganti semua tag SVG dengan img piksel tunggal berikut:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="float:left;width:260px;height:44px;" />

Ada draf kerja CSS3 yang (mudah-mudahan segera) memungkinkan Anda untuk menulis:

p { text-indent: 200px hanging; }

Pantau terus: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

Jika Anda bergaya sebagai daftar