Cara Membuat Pemisah CSS Responsif Sahaja untuk Senarai Mendatar Yang Hilang pada Pemisah Baris?

CSS-Only Separator for Responsive Horizontal List

Dalam konteks navigasi responsif, bagaimana pemisah antara item senarai boleh dialih keluar di pemisah baris disebabkan oleh pelbagai sudut pandang saiz?

Pemisah Responsif

Pertimbangkan senario berikut:

• Lebar Viewport:

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

• Small Viewport:

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

Walau bagaimanapun, dalam beberapa kes, pemisah mungkin berterusan pada pemisah talian, seperti yang ditunjukkan dalam ini biola.

Penyelesaian CSS Sahaja

Dengan mengeksploitasi keruntuhan automatik ruang putih mengekor dan mengekor garisan, kami boleh mencipta pemisah responsif:

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

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

Atas ialah kandungan terperinci Cara Membuat Pemisah CSS Responsif Sahaja untuk Senarai Mendatar Yang Hilang pada Pemisah Baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!