title: Responsive Separator for Horizontal List
body: <p>This question expands upon '<a href="https://stackoverflow.com/questions/5688791/separators-for-navigation">Separators For Navigation</a>' by asking, how it is possible to remove the separators at the line breaks cause by viewport size.</p>
  
  <strong>Wide Viewport</strong>
  
  <pre><code>-&gt;       Item 1 | Item 2 | Item 3 | Item 4 | Item 5       &lt;-
  </code></pre>
  
  <strong>Small Viewport</strong>
  
  <pre><code>-&gt;  Item 1 | Item 2 | Item 3  &lt;-
  -&gt;      Item 4 | Item 5       &lt;-
  </code></pre>
  
  <p>Here is a fiddle that shows how a pipe remains at the line break:</p>
  
  <p><a href="https://jsfiddle.net/u2zyt3vw/" rel="noreferrer">Fiddle</a>.</p>
  
  <p>I'm interested in a css-only solution, but javascript is acceptable if it provides the only possible solution.</p>