Bagaimana untuk Mencipta Pemisah Senarai Mendatar Responsif Hanya Menggunakan CSS?

Mencipta Pemisah Responsif untuk Senarai Mendatar

Dalam soalan asal, pengguna menginginkan pemisah responsif yang akan mengalih keluar garis menegak pada baris pecah disebabkan oleh saiz viewport. Sebagai contoh, ruang pandang lebar mungkin memaparkan:

-> Perkara 1 | Perkara 2 | Perkara 3 | Perkara 4 | Item 5

Walaupun port pandangan kecil mungkin memaparkan:

-> Perkara 1 | Perkara 2 | Perkara 3 -> Perkara 4 | Item 5

Penyelesaian CSS Sahaja

Sebagai tindak balas kepada pertanyaan ini, pengguna yang bijak menyediakan penyelesaian CSS sahaja yang mengeksploitasi fakta bahawa mengekori dan garis ruang putih mengekori secara automatik runtuh:

document.write(`<div>`
+ `word<b> </b>`.repeat(42)
+ `</div>`);

b {
    background: red;
    outline: 1px solid blue;
}
div {
    resize: both;
    overflow: hidden;
}

Dengan mencipta rentetan panjang perkataan berulang dipisahkan dengan teg tebal, kita boleh mencipta garisan mendatar yang akan runtuh pada pemisah baris tanpa meninggalkan sebarang garis menegak.

Pertimbangan Tambahan

Sementara penyelesaian ini menyediakan kaedah CSS sahaja yang elegan untuk mencapai hasil yang diingini, adalah penting untuk ambil perhatian bahawa ia mungkin tidak sesuai untuk semua senario. Sebagai contoh, jika anda memerlukan kedudukan yang tepat atau ingin menyesuaikan penampilan pemisah, anda mungkin perlu mempertimbangkan JavaScript atau pendekatan CSS yang lebih kompleks.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Pemisah Senarai Mendatar Responsif Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!