如何在换行时隐藏分隔符？

Question

我认为这是最容易用一个例子来解释的。

假设我在这样的网页上有一个列表：

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

如果用户的屏幕分辨率很小，列表可能会像这样结束：

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

如您所见，第一行末尾有一个逗号。我想改变它，所以如果发生这样的事情，逗号是隐藏的。这意味着它看起来像这样：

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

有没有办法用 CSS 或 Javascript 做到这一点？

感谢您的帮助。

Answer 1

是的。让它们以负边距溢出，并隐藏溢出。

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>