Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Memaparkan Kandungan Atribut Data Berbilang Baris dengan Baris Baharu menggunakan CSS?

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

DDD
DDDasal
2024-11-18 05:46:02610semak imbas

How to Display Multiline Data Attribute Content with New Lines using 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!

Kenyataan:
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