How to Create Responsive CSS-Only Separators for Horizontal Lists That Disappear on Line Breaks?

CSS-Only Separator for Responsive Horizontal List

In the context of responsive navigation, how can separators between list items be removed at line breaks induced by varying viewport sizes?

Responsive Separators

Consider the following scenario:

• Wide Viewport:

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

• Small Viewport:

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

However, in some cases, separators may persist at the line breaks, as demonstrated in this fiddle.

CSS-Only Solution

By exploiting the automatic collapse of trailing and line trailing white space, we can create responsive separators:

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

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

The above is the detailed content of How to Create Responsive CSS-Only Separators for Horizontal Lists That Disappear on Line Breaks?. For more information, please follow other related articles on the PHP Chinese website!