如何用CSS实现仅在同行元素间插入分隔符、换行时省略？

完全可以用纯CSS实现这个需求，核心思路是利用内联元素的换行特性和容器的溢出隐藏来精准控制分隔符的显示时机。

实现代码 #

HTML结构

<div class="tag-container">
  <span class="tag">标签1</span>
  <span class="tag">标签2</span>
  <span class="tag">标签3</span>
  <span class="tag">标签4</span>
</div>

CSS样式

.tag-container {
  overflow: hidden; /* 隐藏溢出到下一行的分隔符 */
}

.tag {
  display: inline-block;
  margin: 4px 0;
  padding: 4px 8px;
  background-color: #eee;
  border-radius: 4px;
}

/* 给每个元素后面添加分隔符 */
.tag::after {
  content: '·';
  margin: 0 0.5em; /* 调整分隔符与元素的间距 */
}

/* 用100%宽度的伪元素将最后一个元素的分隔符挤到下一行 */
.tag-container::after {
  content: '';
  display: inline-block;
  width: 100%;
}

原理说明 #

1. 给每个元素通过::after伪元素插入·作为分隔符，默认会紧跟在元素后方显示；
2. 容器的::after是一个宽度100%的内联块元素，它会占据一整行空间，把同一行最后一个元素的分隔符挤到下一行；
3. 容器设置overflow: hidden，下一行的分隔符会被直接隐藏；
4. 当元素因空间不足换行时，换行后的元素的分隔符同样会被这个100%宽度的伪元素挤到下一行并隐藏，因此换行的元素之间不会出现分隔符，完全符合需求。

补充说明 #

• 如果你的元素是原生inline类型（比如<a>标签），无需额外设置display: inline-block，直接使用默认的内联特性即可；
• 可以根据需求自定义分隔符的样式，比如修改符号、调整颜色、字号等。

内容的提问来源于stack exchange，提问作者Alan H.