如何為換行時消失的水平清單建立僅 CSS 的響應式分隔符號？

響應式等級清單的CSS 分隔符號

在響應式導覽的上下文中，如何刪除清單項目之間的分隔符不同視口引起的換行尺寸？

響應式分隔符號

考慮以下場景：

• 寬視口：

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

• 小視窗：

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

但是，在某些情況下，分隔符號可能會保留在換行符處，如此所示fiddle.

純CSS 解決方案

透過利用尾隨和行尾隨空白的自動折疊，我們可以建立響應式分隔符號：

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

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

以上是如何為換行時消失的水平清單建立僅 CSS 的響應式分隔符號？的詳細內容。更多資訊請關注PHP中文網其他相關文章！