通过 CSS 负边距与伪元素结合 overflow 隐藏技巧，可在不依赖 JavaScript 的前提下，为 Flex 换行容器中每行内相邻子项之间精准插入分隔符，首项前与换行后首项前均无冗余符号。
通过 css 负边距与伪元素结合 overflow 隐藏技巧，可在不依赖 javascript 的前提下，为 flex 换行容器中**每行内相邻子项之间**精准插入分隔符，首项前与换行后首项前均无冗余符号。
实现该效果的关键在于：让每个子元素都“自带”一个前置分隔符（如 •），再通过父容器的负左外边距 + 外层包装器的 overflow: hidden，将每行首个元素前多余的分隔符裁剪掉。这样既保持了语义简洁，又完全规避了 JavaScript 逻辑判断。
以下是完整、可直接运行的解决方案：
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
margin: 0;
}
.wrapper {
display: inline-block;
overflow: hidden; /* 关键：隐藏溢出的首项前分隔符 */
}
#container {
display: flex;
flex-flow: row wrap;
margin-left: -10px; /* 关键：向左偏移，使首项前的 • 被 wrapper 截断 */
}
#container > div {
margin-right: 5px; /* 子项间基础间距 */
margin-left: 10px; /* 为 ::before 留出空间，确保 • 对齐 */
}
#container > div::before {
content: "•";
display: inline-block;
margin-right: 10px;
color: #666;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="container">
<div>Apple</div>
<div>Banana</div>
<div>Cherry</div>
<div>Durian</div>
<div>Mango</div>
<div>Pear</div>
</div>
</div>
</body>
</html>✅ 工作原理简析：
- 每个 通过 ::before 插入 • 并设置 margin-right: 10px，形成 “• X” 结构；
- #container 设置 margin-left: -10px，使所有子项整体左移 10px —— 此时第一项的 • 完全移出 .wrapper 左边界，被 overflow: hidden 裁剪；
- 后续同理：每行首个元素的 • 均因左移而被隐藏，其余元素的 • 则自然出现在前一元素右侧，达成“仅在行内相邻项之间显示”的效果。
⚠️ 注意事项：
- 分隔符宽度（此处为 • + margin-right: 10px）需与 margin-left 绝对值严格匹配（本例均为 10px），否则可能出现错位或残留；
- 若更换更宽分隔符（如 "—" 或图标），请同步调整 margin-left 和 margin-right 值；
- 不建议在子元素上使用 flex: 1 或强制 min-width，以免干扰换行计算；
- 该方案兼容所有现代浏览器（Chrome/Firefox/Safari/Edge ≥ 2020），无需前缀。
此方法轻量、声明式、无 JS 依赖，是响应式列表分隔场景下的优雅 CSS 实践。
