包含span子元素的div超宽时无法换行，如何解决？

• span是行内元素：行内元素默认会在一行连续排列，只有遇到空格、换行符这类自然分隔符，或者容器设置了强制换行规则时，才会自动换行。
• span标签无间隔：你代码里的span是紧挨着写的（比如<span>ALL</span><span>QB</span>），浏览器不会自动在这些span之间生成换行点，导致所有span被当成连续内容，没法拆分换行。
• 容器固定宽度限制：.positions设置了width:100px的固定宽度，当行内内容总宽度超过这个值时，就会直接溢出容器。

下面几种方法都能实现自动换行，按需选择：

方法1：给span加间隔（最直接） #

在HTML里给span标签之间加空格或换行，让浏览器识别换行点：

<div class="positions">
  <span class="ALL">ALL</span> <span class="QB">QB</span> <span class="RB">RB</span>
  <span class="WR">WR</span> <span class="TE">TE</span> <span class="OL">OL</span>
  <span class="DL">DL</span> <span class="LB">LB</span> <span class="CB">CB</span>
  <span class="S">S</span> <span class="Special">Special</span>
</div>

方法2：CSS强制容器换行 #

给.positions添加换行相关样式，强制内容在容器边界处换行：

.positions {
  width: 100px;
  border: 1px solid green;
  height: auto;
  position: relative;
  /* 新增样式 */
  white-space: normal;
  word-break: break-all;
}

方法3：把span改成行内块元素 #

行内块元素会在容器宽度不足时自动换行，同时保留块元素的特性：

.positions span {
  margin-left: 10px;
  cursor: pointer;
  /* 新增样式 */
  display: inline-block;
  margin-top: 5px; /* 可选，增加行与行之间的间距 */
}

方法4：用Flex布局（推荐，更灵活） #

把.positions设为Flex容器，开启自动换行，还能更方便地控制间距：

.positions {
  width: 100px;
  border: 1px solid green;
  height: auto;
  position: relative;
  /* 新增Flex样式 */
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 替代margin-left，统一控制元素间距 */
}

/* 清除span原有margin-left */
.positions span {
  cursor: pointer;
  margin-left: 0;
}

内容的提问来源于stack exchange，提问作者LauraNMS