Bagaimana untuk Menambah Pemisah Baris pada Kandungan Unsur Pseudo Menggunakan CSS?

Menambah Pemisah Baris pada Kandungan Unsur Pseudo Menggunakan CSS

Pengenalan

Apabila menambah teks melalui ::selepas atau ::sebelum pseudo-elemen dalam CSS tanpa akses kepada HTML atau PHP, keperluan timbul untuk sertakan pemisah baris untuk kandungan berbilang baris. Artikel ini membincangkan cara untuk mencapai ini menggunakan CSS.

Menambah Pemisah Baris

Untuk menambah pemisah baris dalam sifat kandungan, gunakan jujukan melarikan diri "A". Walau bagaimanapun, pemisah baris yang disisipkan tertakluk pada sifat "ruang putih".

Contoh

Untuk menggambarkan, pertimbangkan kod berikut:

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

Ini akan menambah pemisah baris selepas "XXXXX" dan memaparkan kandungan sebagai:

Office: XXXXX
Mobile: YYYYY

Jujukan Melarikan Diri Alternatif

Jika anda menemui hasil yang tidak dapat diramalkan apabila menggunakan A, anda dinasihatkan untuk menggunakan 0000a. Ini memastikan bahawa rentetan arbitrari dilepaskan dengan betul.

Contoh Fungsi Escape

Untuk kemudahan, anda boleh menggunakan fungsi JavaScript berikut untuk melepaskan teks sembarangan dan menambahkannya pada CSS blok gaya:

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\"').replace(/\n/g, '\00000a')} }"`;
}

Atas ialah kandungan terperinci Bagaimana untuk Menambah Pemisah Baris pada Kandungan Unsur Pseudo Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!