当容器内含多个内联元素（如 span）且总宽度超出父容器时，浏览器默认不会自动换行；解决方法是将容器设为 display: flex 并启用 flex-wrap: wrap，从而实现响应式、可控的多行布局。
当容器内含多个内联元素（如 `span`）且总宽度超出父容器时，浏览器默认不会自动换行；解决方法是将容器设为 `display: flex` 并启用 `flex-wrap: wrap`，从而实现响应式、可控的多行布局。
在 Web 开发中，<span> 是典型的内联级（inline）元素，其天然行为是：不独占一行、忽略 width/height 设置、且在水平方向连续排列——即使内容总宽度超过容器边界，也不会自动折行，而是溢出或横向滚动（取决于 overflow 设置）。这正是问题中 .positions 容器内多个 <span> 挤作一排、撑破视口的根本原因。
要让这类“伪标签组”具备类似段落文本的自然换行能力，最简洁、语义清晰且现代的方案是使用 Flexbox 布局：
✅ 推荐解决方案：启用 Flex 弹性换行
只需为 .positions 容器添加两条 CSS 声明：
.positions {
display: flex;
flex-wrap: wrap;
/* 其余原有样式保持不变 */
width: 100px; /* 注意：此固定宽度过小，实际中建议设为 auto 或百分比 */
border: 1px solid green;
font-size: .9rem;
font-family: 'proxima-nova';
}- display: flex 将容器转为弹性容器，其子元素（所有 <span>）自动成为弹性项目（flex items），默认沿主轴（水平）排列；
- flex-wrap: wrap 允许项目在空间不足时换行到下一行，而非强制压缩或溢出。
? 提示：原 CSS 中 .positions { width: 100px } 会严重限制可用空间，导致过早换行（甚至每项一行）。生产环境建议改为 width: 100% 或 max-width: 300px 等更合理的值，并配合 justify-content 控制对齐（如 justify-content: flex-start 或 center）。
? 补充优化建议
- 移除冗余 float 影响：.col 使用了 float: left，虽与 .positions 无直接冲突，但整体布局已转向 Flex，可考虑逐步迁移至 display: flex 的现代栅格系统，避免浮动带来的清除浮动（.group:after）等兼容性负担。
- 增强可访问性与语义：若这些 <span> 实际代表可交互的筛选标签，建议改用 <button type="button"> 替代 <span>，并添加 role="button" 和键盘事件支持（如 Enter/Space 触发），提升无障碍体验。
-
响应式微调：在小屏幕下（如 <800px），可叠加 gap: 8px 替代 margin-left: 10px，避免首项左侧空白，并统一间距逻辑：
@media (max-width: 800px) { .positions { gap: 8px; } .positions span { margin-left: 0; /* 覆盖原有 margin */ } }
⚠️ 注意事项
- IE11 兼容性：flex-wrap 在 IE11 中支持良好，但需确保未使用 flex: 1 等简写触发 IE 的计算 bug；如需支持 IE10 及以下，应降级为 display: inline-block + white-space: normal 组合（需重置 vertical-align 和父容器 font-size: 0 防空白间隙）。
- 不要仅依赖 word-break 或 white-space：white-space: normal 对内联元素生效，但无法解决 span 间无空格导致的“零换行点”问题；word-break: break-word 仅作用于长单词，对短标签无效。
综上，display: flex + flex-wrap: wrap 是解决此类“内联标签流溢出”问题的标准、高效且可维护的现代方案，兼顾表现力、响应性与代码可读性。
