Indentasi dimulai dari baris kedua paragraf dengan CSS


103

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;
}

Mengapa semua inden teks baris pertama Anda disetel ke 0? Juga, saya tidak tahu bagaimana melakukan ini, tetapi yang hilang dari daftar ini adalah yang paling masuk akal bagi saya, padding.
Skarlinski

Jawaban:


211

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.


3
@Reuben Berdasarkan komentar Anda yang sekarang telah dihapus, saya berasumsi bahwa Anda melakukan maksud wajah DARI baris kedua - dan demi pengunjung yang akan datang, mungkin biola ini lebih baik, di mana sintaksnya adalah P bukan div atau span. jsfiddle.net/gg9Hx
redditor

1
Mengapa padding-left dan kemudian teks-indent negatif? Kenapa harus seperti itu? Sepertinya aneh. Mengapa tidak hanya yang positif text-indent?
Don Cheadle

2
Indentasi teks tidak berpengaruh pada span. Ini dapat dihapus dari gaya span untuk hasil yang sama.
Sam Hasler

25

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>

24

Ini berhasil untuk saya:

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

10
Ini tampaknya melakukan kebalikan dari apa yang diminta OP. Versi @ techillage benar. Anda perlu menukar minusnya
Alex Holsgrove

1
Ini hampir persis seperti yang saya butuhkan. Jawaban yang diterima tidak akan berfungsi untuk saya karena saya tidak memiliki kebebasan di CMS saya untuk menambahkan span dengan cara itu. Satu-satunya masalah yang saya hadapi dengan solusi di sini, adalah margin kiri akan menarik seluruh paragraf di luar wadah. Jadi saya menambahkan 'posisi: relatif' dan 'kiri: 2em' dan itu sempurna. Bertentangan dengan komentar @AlexHolsgrove, jawaban techillage sama sekali tidak berhasil untuk saya, tetapi mungkin karena saya tidak melakukan ini pada elemen daftar.
Stu Furlong

2

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;" />


1

Jika Anda bergaya sebagai daftar

  • Anda dapat "text-align: initial" dan baris-baris berikutnya akan membuat indentasi. Saya menyadari ini mungkin tidak sesuai dengan kebutuhan Anda, tetapi saya sedang memeriksa untuk melihat apakah ada solusi lain sebelum saya mengubah markup saya ..

    Saya kira memasukkan baris kedua juga akan berhasil, tetapi membutuhkan pemikiran manusia agar konten mengalir dengan benar, dan, tentu saja, jeda baris yang keras (yang tidak mengganggu saya, per se).


  • 1
    selamat datang di Stackoverflow. Sepertinya Anda punya solusi untuk masalah indentasi ini. Namun akan sangat membantu semua orang jika Anda memberikan beberapa markup dan menjelaskan solusinya. Mungkin Anda dapat menggunakan jsfiddle.net atau layanan lain untuk membuat demo yang berfungsi. Semua yang terbaik.
    EGL 2-101
    Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
    Licensed under cc by-sa 3.0 with attribution required.