Responsive Separator for Horizontal List
<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>