水平列表的响应分隔符

Question

此问题通过询问如何在视口大小导致的换行符处删除分隔符来扩展" 导航分隔符 ".

宽视口

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

小视口

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

这是一个小提琴,显示管道如何保持在换行符:

小提琴.

我对仅限css的解决方案感兴趣,但如果它提供唯一可能的解决方案,则javascript是可以接受的.

Answer 1

您可以利用尾随和行尾随空格自动折叠的事实:https://jsfiddle.net/vnudrsh6/7/

nav {
  text-align: center;
  padding-right: 1em; /* = li::after@word-spacing */
}
ul {
  display: inline;
  margin: 0;
  padding: 0;
}
li {
  display: inline;
  /* white-space: nowrap should be moved to child A because IE fails to wrap resulting list completely */
}
li::before {
  content: ' ';
  /*
  this content is important only for Crome in case the HTML will be minified with no whitespaces between </li><li>
  */
}
li::after {
  content: ' ';
  white-space: normal;
  word-spacing: 1em; /* = nav@padding-right - this actually makes width */
  background-image: radial-gradient(circle, black, black 7%, transparent 15%, transparent 35%, black 45%, black 48%, transparent 55%);
  background-size: 1em 1em;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0.5;
}
/*
no need to unset content of li:last-child, because it will be the trailing whitespace so it will collapse
*/
a {
  white-space: nowrap; /* here */
  display: inline-block; /* to allow padding */
  padding: 1em;
  text-decoration: none;
  color: black;
  transition-property: background-color;
  transition-duration: 500ms;
}
a:hover {
  background-color: #ccc;
}

<nav>
  <ul>
    <li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item 3</a></li><li><a href="#">Item 4</a></li><li><a href="#">Item 5</a></li><li><a href="#">Item 6</a></li><li><a href="#">Item 7</a></li><li><a href="#">Item 8</a></li><li><a href="#">Item 9</a></li><li><a href="#">Item 10</a></li><li><a href="#">Item 11</a></li><li><a href="#">Item 12</a></li><li><a href="#">Item 13</a></li><li><a href="#">Item 14</a></li><li><a href="#">Item 15</a></li><li><a href="#">Item 16</a></li><li><a href="#">Item 17</a></li><li><a href="#">Item 18</a></li><li><a href="#">Item 19</a></li><li><a href="#">Item 20</a></li>
  </ul>
</nav>
<p>(Content)</p>

这个概念验证使用了每个之后"最终colaps"CSS生成的内容空间的背景图像<li>.在当前的Firefox,Chrome和IE11中测试过.