Bagaimanakah saya boleh menambah pemisah baris pada kandungan unsur pseudo menggunakan atribut data dalam CSS?

Menetapkan Aksara Baris Baharu kepada Atribut Data dalam CSS dan Kandungan Unsur Pseudo

Pertanyaan ini meneroka kemungkinan memasukkan aksara baris baharu ke dalam CSS atribut data. Pengguna menyasarkan untuk memaparkan kandungan berbilang baris menggunakan sifat kandungan unsur pseudo dan nilai yang diekstrak daripada atribut data.

Pelaksanaan

Pendekatan awal, menggunakan "a" sebagai aksara baris baharu dalam atribut data, terbukti tidak berjaya. Untuk mencapai hasil yang diingini, pengubahsuaian berikut diperlukan:

Pengubahsuaian Atribut Data:

• Ganti "a" dengan " "; entiti HTML ini sepadan dengan aksara pemisah baris.

Pengubahsuaian CSS:

• kandungan: attr(data-foo) ;: Kekalkan kefungsian asal untuk memaparkan kandungan atribut data.
• warna latar belakang: hitam; ruang putih: pra; kandungan mengekalkan pemformatannya dan dipaparkan sebagai blok diskret.

Kod Akhir:

CSS:

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
    color: white;
    white-space: pre;
    display: inline-block;
}

HTML:

<div data-foo='First line &amp;#xa; Second Line'>foo</div>

Pengubahsuaian ini membenarkan elemen pseudo memaparkan kandungan berbilang baris, mengekalkan pemisah baris seperti yang ditakrifkan dalam atribut data.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menambah pemisah baris pada kandungan unsur pseudo menggunakan atribut data dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!