Bagaimana untuk Mencipta Pemisah Responsif untuk Senarai Mendatar Yang Hilang pada Pemisah Talian?

Pemisah Responsif untuk Senarai Mendatar

Soalan:

Bagaimana anda boleh mengalih keluar pemisah pada baris rehat yang disebabkan oleh perubahan dalam viewport saiz?

Contoh:

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

Apabila port pandangan mengecil:

Item 1	Item 2	Item 3
Item 4	Item 5

Perhatikan bahawa pemisah kekal pada pemisah baris.

Penyelesaian yang Mungkin:

CSS sahaja:

Anda boleh manfaatkan keruntuhan ruang putih yang mengekori:

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

<div>
    word<b> </b>.repeat(42)
</div>

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