Bagaimana untuk Memasukkan Pemisah Baris dalam ::selepas atau ::sebelum Kandungan Unsur Pseudo?

Pecah Baris dalam ::selepas atau ::sebelum Kandungan Elemen Pseudo

Menyesuaikan kandungan ::selepas atau ::sebelum elemen pseudo dalam CSS boleh meningkatkan persembahan elemen. Walau bagaimanapun, memasukkan berbilang baris dalam sifat kandungan menimbulkan cabaran.

Untuk menangani cabaran ini, CSS menyediakan mekanisme untuk memasukkan pemisah baris menggunakan jujukan melarikan diri "A". Peraturan di bawah menunjukkan cara:

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

Dengan menyatakan sifat "ruang putih" sebagai "pra" atau "pra-bungkus", pemisah baris dihormati dan dipaparkan dengan sewajarnya.

Walau bagaimanapun, berhati-hati dinasihatkan apabila melarikan diri daripada rentetan sewenang-wenangnya. Daripada "A", adalah disyorkan untuk menggunakan " 0000a" untuk mengelakkan hasil yang tidak dapat diramalkan disebabkan oleh aksara yang mengikuti baris baharu.

Berikut ialah fungsi JavaScript yang boleh anda gunakan untuk menambah teks pada gaya CSS dengan urutan pelarian yang diperlukan :

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

Dengan teknik ini, anda boleh dengan mudah memasukkan berbilang baris ke dalam sifat kandungan ::after atau ::before unsur pseudo, mempertingkatkan persembahan visual unsur anda.

Atas ialah kandungan terperinci Bagaimana untuk Memasukkan Pemisah Baris dalam ::selepas atau ::sebelum Kandungan Unsur Pseudo?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!