Bagaimana untuk Memaparkan Kandungan Atribut Data Berbilang Baris dengan Baris Baharu menggunakan CSS?

Memanipulasi Atribut Data dan Kandungan Pseudo-Element dengan Baris Baharu

Dalam CSS, adalah mungkin untuk mendapatkan nilai daripada atribut data menggunakan fungsi attr() dan memaparkannya sebagai kandungan menggunakan unsur pseudo. Walau bagaimanapun, memasukkan baris baharu dalam atribut data ini boleh menjadi mencabar.

Isu: Watak Baris Baharu dalam Atribut Data

Pertimbangkan contoh kod berikut:

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
}

<div data-foo="First line \a Second Line">foo</div>

Walaupun menggunakan jujukan melarikan diri "a", yang mewakili aksara baris baharu dalam CSS, kandungan dalam atribut data-foo kekal pada satu baris.

Penyelesaian: Sintaks Atribut Data Dipertingkat dan Konfigurasi Ruang Putih

Untuk mendayakan atribut data berbilang baris, ubah suai sintaks seperti berikut:

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

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

Dalam versi diubah suai ini:

• ruang putih: pra; : Mengekalkan aksara ruang putih dalam atribut data, termasuk baris baharu.
• paparan: inline-block;: Menghalang pembalut teks dan membenarkan kandungan mengalir pada berbilang baris.
• ;: Entiti HTML untuk pemisah baris.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Kandungan Atribut Data Berbilang Baris dengan Baris Baharu menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!