如何为换行时消失的水平列表创建仅 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中文网其他相关文章！