Bolehkah Atribut Data dalam CSS Mengandungi Aksara Baris Baharu?

Mengendalikan Aksara Baris Baharu dalam Atribut Data CSS dan Kandungan Elemen Pseudo

Soalan:

Bolehkah atribut data dalam CSS mengandungi aksara baris baharu? Secara khususnya, bolehkah gabungan CSS dan HTML berikut mencapai ini:

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

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

Jawapan:

Memang mungkin untuk mempunyai baris baharu dalam atribut data CSS. Contoh yang diberikan, bagaimanapun, tidak menunjukkan sintaks yang betul. Untuk mencapai hasil yang diingini, anda boleh mengikuti langkah berikut:

1. Ubah Suai Atribut Data Anda:

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

Dalam HTML yang dikemas kini ini, aksara baris baharu (a) digantikan dengan entiti HTML . Entiti ini mewakili aksara suapan baris (LF), yang akan mencipta baris baharu dalam kandungan.

2. Laraskan CSS Anda:

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

Dalam CSS, tambahkan sifat berikut:

• ruang putih: pra; Mengekalkan ruang putih dalam kandungan, termasuk baris baharu.
• paparan: inline-block; Menghalang kandungan daripada memecahkan aliran teks sekeliling.

CSs yang diubah suai ini memastikan bahawa kandungan atribut data, termasuk baris baharu, dipaparkan seperti yang dimaksudkan.

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