JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foo">
  <!-- These *must not* have white space between them, or it will collapse to a space before the comma, and the ellipsis will become visible -->
  <span>stackoverflow</span><span> is</span><span> the</span><span> best</span>
</div>

CSS

.foo {
  /* Make it easy to see where the cutoff point is */
  border: 2px solid #999;

  padding-right: 18px; /* Always have room for an ellipsis */
  width: 130px;
  height: 1.1em; /* Only allow one line of text */
  overflow: hidden; /* Hide all the text below that line */
  background-color: #fff; /* Background color is required */
}
.foo > span {
  display: inline-block; /* These have to be inline block to wrap correctly */
  position: relative; /* Give the ellipsis an anchor point so it's positioned after the element */
  background-color: #fff; /* Cover the ellipsis of the previous element with the same background color */
  white-space: pre; /* Make sure the only point where wrapping is allowed is before a comma */
}
.foo > span:after {
  position: absolute; /* Take the ellipsis out of the flow, so the next item will cover it */
  content: "…"; /* Each span has an ellipsis */
}
.foo > span:last-child:after {
  content: ""; /* Except for the last one */
}