Bolehkah Baris Baharu Digunakan dalam Atribut Data CSS untuk Kandungan Unsur Pseudo?

Menyesuaikan Kandungan Unsur Pseudo CSS dengan Atribut Data dan Aksara Baris Baharu

Dalam dunia CSS, atribut data menawarkan cara yang mudah untuk membenamkan maklumat ke dalam elemen HTML yang boleh diakses dan dimanipulasi dengan peraturan gaya. Tetapi bagaimana jika anda perlu memasukkan baris baharu dalam atribut data ini?

Soalan:

Bolehkah anda menentukan baris baharu dalam atribut data CSS dan menggunakannya dalam kandungan unsur pseudo?

Terperinci Penjelasan:

Untuk mendayakan baris baharu dalam atribut data, anda mesti mengubah suai nilai atribut itu sendiri. Begini caranya:

1. Escape watak baris baharu: Gantikan aksara baris baharu standard "a" dengan pengekodan entiti HTMLnya, " ". Ini akan menukar baris baharu kepada jujukan aksara yang diiktiraf.

2. Laraskan gaya elemen pseudo: Untuk mengekalkan baris baharu, tambahkan sifat berikut pada elemen pseudo:

   • ruang putih: pra;: Menghalang keruntuhan ruang putih aksara.
   • paparan: inline-block;: Membenarkan elemen pseudo untuk menduduki berbilang baris.
3. Ubah suai penanda HTML: Gunakan nilai atribut data yang diubah suai dalam HTML anda, memastikan bahawa aksara baris baharu adalah betul melarikan diri.

Kod Contoh:

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

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

Dengan pengubahsuaian ini, elemen pseudo akan memaparkan kandungan atribut data dengan baris baharu yang dipelihara , membolehkan anda membuat paparan berbilang baris berdasarkan atribut data tersuai.

Atas ialah kandungan terperinci Bolehkah Baris Baharu Digunakan dalam Atribut Data CSS untuk Kandungan Unsur Pseudo?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!