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

Menggabungkan Pecah Garis ke dalam Kandungan Elemen Pseudo

Menambahkan berbilang baris pada sifat kandungan ::selepas atau ::sebelum unsur pseudo boleh meningkatkan kebolehbacaan dan pemformatan. Walau bagaimanapun, melaksanakan operasi ini semata-mata melalui CSS memberikan cabaran.

Menggunakan Urutan Melarikan Diri "A"

Dokumentasi sifat kandungan mencadangkan penggunaan jujukan melarikan diri "A" untuk sertakan baris baharu dalam kandungan yang dijana. Pemisah baris yang disisipkan ini mematuhi sifat 'ruang putih'.

Untuk menggambarkan penggunaannya, pertimbangkan contoh berikut:

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

Kod ini menambah pemisah baris antara "Pejabat" dan teks "Mudah alih", memformat kandungan ke dalam berbilang baris. Lihat demonstrasi langsung di http://jsfiddle.net/XkNxs/.

Nota Awas

Apabila melarikan diri dari rentetan sewenang-wenangnya, gunakan " 0000a" dan bukannya "A" untuk mengelakkan hasil yang tidak dapat diramalkan akibat daripada aksara berikutnya yang menyerupai berangka atau perenambelasan nilai. Contoh fungsi untuk mencapai ini dengan selamat:

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 dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!