Untuk memberikan inden tergantung pada entri berbalut yang dipisahkan dengan tag <br>, gunakan text-indent: 2em hanging each-line pada bekas bloknya. Semak sokongan untuk kedua-dua kata kunci; jika pelayar lama perlu disokong, jadikan setiap entri blok tersendiri dan gunakan padding dengan inden negatif.

Panduan ini ditujukan kepada seseorang yang menyunting halaman HTML kecil pada Mac dan mahu setiap entri bermula sejajar dengan tepi kiri, sementara baris sambungannya berada lebih ke dalam. Contoh menggunakan teks rekaan dan hanya memerlukan penyunting teks biasa atau kod serta pelayar.

Mengapa inden tergantung biasa tidak berfungsi selepas tag pemisah baris

Terdapat dua jenis penghujung baris yang perlu dipertimbangkan. <br> menghasilkan pemisah baris yang jelas. Balutan lembut berlaku apabila pelayar memuatkan teks dalam lebar yang tersedia. Reka letak yang dikehendaki menganggap yang pertama sebagai permulaan entri lain dan yang kedua sebagai sambungan. WHATWG mentakrifkan <br> sebagai pemisah baris; ia tidak menghasilkan perenggan atau bekas entri baharu. HTML Standard: The br element.

text-indent negatif biasa mempengaruhi baris terformat pertama dalam sesuatu blok. Oleh itu, penambahan padding boleh menghasilkan inden tergantung untuk blok itu, tetapi inden tersebut tidak bermula semula selepas setiap <br>. Entri seterusnya masih tergolong dalam blok yang sama. MDN: text-indent.

Spesifikasi CSS mentakrifkan gabungan yang diperlukan di sini: each-line merangkumi baris pertama dan baris yang serta-merta mengikuti pemisah paksa; hanging membalikkan pemilihan itu. Apabila digabungkan, kedua-duanya menginden baris sambungan yang berbalut lembut sambil memastikan setiap baris yang dimulakan secara jelas kekal sejajar. W3C: First Line Indentation.

Hasil yang disasarkan kelihatan seperti ini. Penghujung baris di bawah hanyalah gambaran; pelayar akan menentukan titik balutan sebenar berdasarkan lebar yang tersedia dan metrik fon.

Entri A bermula di tepi luar dan bersambung
    ke dalam apabila lebar yang tersedia tidak mencukupi.
Entri B juga bermula di tepi luar dan mempunyai
    sambungan berinden tersendiri.
Entri C pendek.

Pilih kaedah sebelum mengubah halaman

Gunakan penanda sedia ada dan keperluan pelayar untuk memilih pendekatan. Jadual keputusan ini berdasarkan tingkah laku inden yang didokumenkan dan data sokongan pelayar; jadual ini ialah panduan pelaksanaan, bukannya ciri pelayar yang berasingan.

Keadaan anda Pendekatan yang disyorkan
Pemisah baris yang jelas merupakan sebahagian daripada satu petikan teks dan pelayar yang disokong sudah memadai Kekalkan pemisah dan gunakan hanging each-line
Entri ialah perenggan atau item senarai yang berasingan Berikan penanda struktur yang sesuai kepada setiap entri
Pelayar lama perlu memaparkan inden tergantung Gunakan satu blok bagi setiap entri dengan padding dan inden negatif
Anda hanya boleh menyunting CSS dan pelayar lama tidak menyokong kata kunci tersebut Kekalkan reka letak sejajar yang mudah dibaca atau minta perubahan pada penanda

Jangan membuat kesimpulan tentang sokongan kata kunci berdasarkan sokongan untuk text-indent asas. Data keserasian semasa MDN menyenaraikan kedua-dua hanging dan each-line mulai Safari 15, Firefox 121 dan Chrome 146. Pemasangan lama mungkin menyokong inden biasa tetapi menolak gabungan ini. MDN browser compatibility data: text-indent.

Semak juga sama ada pemisah tersebut mencerminkan struktur yang betul. WHATWG menetapkan <br> untuk pemisah yang merupakan sebahagian daripada kandungan dan menyatakan bahawa ia tidak boleh memisahkan kumpulan bertema dalam perenggan. Perenggan berasingan hendaklah menggunakan elemen perenggan; koleksi item senarai pula hendaklah menggunakan penanda senarai. HTML Standard: The br element, HTML Standard: Grouping content.

Kekalkan tag pemisah dengan penyelesaian CSS terbina dalam

Dokumen HTML lengkap berikut menunjukkan kaedah yang mengekalkan pemisah. Pada Mac anda, tampalkannya ke dalam penyunting teks biasa atau kod, simpan sebagai hanging-indent.html dan buka fail itu dalam pelayar. Gunakan fail HTML, bukannya dokumen teks berformat.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Break-separated hanging indent</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .entries {
      max-inline-size: 30rem;
      margin: 0;
      white-space: normal;
      text-align: start;
      text-indent: 0;
    }

    @supports (text-indent: 2em hanging each-line) {
      .entries {
        text-indent: 2em hanging each-line;
      }
    }
  </style>
</head>
<body>
  <h1>Sample entries</h1>
  <p class="entries">Entry A: A long sample line describing a pale rectangular panel, a narrow heading area, and a small square beside the heading.<br>
Entry B: Another long sample line describing a circular tile, an open space beneath it, and a row of neutral labels.<br>
Entry C: A short sample line.</p>
</body>
</html>

Syarat @supports menyemak keseluruhan pengisytiharan sebelum menggunakannya. Pelayar yang tidak menyokong gabungan itu akan mengekalkan reka letak sejajar yang ditakrifkan dengan jelas. Pertanyaan ciri menggunakan CSS secara bersyarat berdasarkan sokongan pelayar. MDN: @supports.

Gunakan inden pada .entries, iaitu blok yang mengandungi teks. Sifat yang berkaitan terpakai pada bekas blok; meletakkan pengisytiharan pada <br> tidak menyediakan bekas untuk entri seterusnya. MDN: text-indent.

Nilai 2em ialah pilihan reka bentuk yang boleh dilaraskan. Cuba nilai yang lebih kecil atau besar selepas menyemak reka letak sempit. Nilai ini menghasilkan anjakan sambungan yang seragam; ia tidak mengukur lebar Entry A: atau menjajarkan teks secara automatik di bawah perkataan pertama selepas label yang panjangnya berubah-ubah.

Gunakan blok berasingan apabila semua pelayar perlu memaparkan inden

Jika setiap entri ialah perenggan tersendiri, ubah penanda supaya setiap entri mempunyai baris pertama tersendiri. Alternatif lengkap berikut membuang pemisah dan menggunakan pengiraan inden tergantung tradisional secara berasingan pada setiap perenggan.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Paragraph hanging indents</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .entries {
      max-inline-size: 30rem;
      text-indent: 0;
    }

    .entry {
      margin: 0;
      padding-inline-start: 2em;
      text-indent: -2em;
      white-space: normal;
      text-align: start;
    }
  </style>
</head>
<body>
  <h1>Sample entries</h1>
  <div class="entries">
    <p class="entry">Entry A: A long sample paragraph describing a pale rectangular panel, a narrow heading area, and a small square beside the heading.</p>
    <p class="entry">Entry B: Another long sample paragraph describing a circular tile, an open space beneath it, and a row of neutral labels.</p>
    <p class="entry">Entry C: A short sample paragraph.</p>
  </div>
</body>
</html>

Padding mengalihkan permulaan kandungan perenggan ke dalam sebanyak 2em. Inden negatif mengalihkan hanya baris pertamanya ke belakang dengan jarak yang sama. Baris yang berbalut mengekalkan kedudukan permulaan yang ditetapkan oleh padding. Nilai yang sama adalah penting: mengubah satu nilai sahaja akan mengubah tempat baris pertama bermula. MDN mendokumenkan inden negatif, manakala padding-inline-start memberikan padding pada tepi permulaan logik. MDN: text-indent, MDN: padding-inline-start.

Bagi saiz fon ilustrasi 16 piksel, anjakan 2em bersamaan dengan 32 piksel: sambungan bermula 32 piksel ke dalam dan pelarasan baris pertama ialah −32 piksel. Ini ialah pengiraan untuk contoh, bukannya hasil pemaparan yang diukur.

Buang pemisah lama apabila menggunakan struktur ini. Kekalkan setiap entri lengkap serta pemformatan sebaris sedia adanya di dalam perenggan baharu. Jika kandungannya ialah senarai, gunakan item senarai; contoh perenggan ini khusus untuk perenggan tersendiri. HTML Standard: Grouping content.

Semak balutan dan aliran teks sebelum selesai

Uji halaman pada lebar yang menyebabkan kedua-dua entri panjang berbalut. Kemudian lebarkan tetingkap sehingga kedua-duanya muat pada satu baris. Gunakan semakan berikut untuk membezakan masalah inden daripada masalah balutan atau struktur.

  1. Semak permulaan setiap entri. Dalam contoh yang mengekalkan pemisah, teks selepas setiap <br> sepatutnya kembali ke tepi luar. Jika tidak, semak sokongan untuk gabungan kata kunci penuh.
  2. Semak setiap sambungan. Entri panjang sepatutnya berbalut ke dalam. Entri pendek sepatutnya kekal sejajar tanpa ruang pendahuluan tambahan.
  3. Semak lajur paling sempit yang disasarkan. Kurangkan inden jika ia menggunakan terlalu banyak lebar baris yang tersedia.
  4. Semak kandungan sebenar. Kekalkan perkataan setiap entri, penegasan sebaris dan pemisah jelas yang dikehendaki apabila memindahkannya ke dalam blok berasingan.

Jika tiada apa-apa yang berbalut, periksa white-space. Contoh ini menggunakan normal, yang meruntuhkan ruang kosong sumber dan membenarkan balutan. pre mengekalkan ruang kosong tetapi menghalang balutan lembut biasa; pre-wrap mengekalkan ruang kosong sambil membenarkannya. Inden tidak dapat dilihat pada baris sambungan yang tidak pernah terbentuk. MDN: white-space.

Elakkan daripada menambah ruang untuk meniru inden. Di bawah white-space: normal, rentetan ruang akan diruntuhkan. Elakkan juga daripada memasukkan tag pemisah tambahan pada titik balutan tetingkap semasa: tindakan itu akan menjadikan sambungan yang dipilih oleh pelayar sebagai permulaan yang jelas, lalu mengubah cara each-line mengendalikannya. MDN: white-space, W3C: First Line Indentation.

Biarkan pelayar mengurus pemisahan baris dan pembentukan glif. Jangan pecahkan entri kepada pembalut aksara untuk mengira baris yang kelihatan. W3C mendokumenkan keadaan apabila sempadan sebaris mengganggu pembentukan, termasuk padding, sempadan atau jidar sebaris bukan sifar antara aksara. Untuk tugasan ini, pembalutan seluruh entri pada sempadan yang ditetapkan akan mengelakkan sempadan tambahan itu di dalam perkataan. W3C: Shaping Across Element Boundaries.

Akhiri dengan struktur yang sepadan dengan kandungan anda: kekalkan pemisah jelas yang bermakna bersama hanging each-line, atau berikan blok tersendiri kepada entri yang berasingan. Pastikan setiap entri bermula sejajar dan hanya sambungan yang berbalut secara semula jadi beralih ke dalam pada lebar yang ingin anda gunakan.

Sumber