How to hide a separator when on a new line?

Question

I think this is easiest to explain with an example.

Say I have a list on a webpage like this:

word one, word two, word three, word four, word five, word six 

If the user has a small screen resolution, the list may end as follows:

 word one, word two, word three, word four, word five, word six 

As you can see, there is a comma at the end of the first line. I would like to change it, so if something like this happens, the comma is hidden. This means that it will look like this:

 word one, word two, word three, word four, word five word six 

Is there a way to do this using CSS or Javascript?

Thank you for your help.

Answer 1

Yes. Just let them overflow with negative fields and hide the overflow.

 div { border: 1px solid; overflow: hidden; animation: size 5s linear infinite alternate; } span { display: inline-block; margin-right: 10px; } span::before { content: ','; display: inline-block; width: 10px; margin-left: -10px; } @keyframes size { from { width: 750px; } to { width: 0; } } 

 <div> <span>word one</span> <span>word two</span> <span>word three</span> <span>word four</span> <span>word five</span> <span>word six</span> </div>