How to hide separator when at newline?

Question

I think this is easiest to explain with an example.

Let's 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 up wrapping like this:

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 occurs, the comma is hidden. That means it would look like this:

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

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

Thanks for your help.

Answer 1

Yes. Just let them overflow with negative margins, 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>