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

Linda Hamilton
Lepaskan: 2024-11-12 16:13:01
asal
543 orang telah melayarinya

Can Newlines Be Used in CSS Data Attributes for Pseudo-Element Content?

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;
}
Salin selepas log masuk
<div data-foo='First line &#xa; Second Line'>foo</div>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan