两个span放在一行过多换行

当在一个元素中放置了过多的 `span` 子元素，并且它们的内容总长度超过了容器的宽度时，就会导致换行。这是因为浏览器默认会按照每个元素的宽度分配空间，如果连续的 `span` 内容过长，没有设置合适的CSS来限制其宽度或者自动换行，就会自然地在列宽不足的地方开始新的一行。解决这个问题可以尝试以下几种方法：

1. **设置固定宽度**：为包含 `span` 的元素设置一个固定的宽度，或者为其内部的 `span` 设置最大宽度。

.parent {
  width: 300px;
}

.child-span {
  max-width: 100%;
}

2. **使用CSS flexbox 或 grid**：通过 Flexbox 或 CSS Grid 可以更灵活地控制元素布局，避免不必要的换行。

.container {
  display: flex; /* 或者 display: grid; */
  flex-wrap: wrap; /* 或者 grid-wrap: wrap; */
}

3. **CSS white-space 属性**：设置 `white-space: nowrap` 来禁止文本换行。

.parent {
  white-space: nowrap;
}

4. **JavaScript动态调整**：如果需要响应式处理，也可以使用 JavaScript 动态计算并调整 `span` 的宽度。

记得在实际应用中选择适合场景的解决方案，并结合具体情况调整样式。