一种不用在span标签之间插入空格就可以实现所需行为的方法是将父容器的display属性设置为flex，并将flex-wrap属性设置为wrap。这将导致子元素在到达父容器的边缘时换到下一行，就像您正在寻找的那样。
你也可以使用inline-block代替inline，因为这将把元素当作一个inline元素来处理，但是也会考虑到元素上设置的宽度和高度。

div { 
    width: 300px; 
    background-color: pink; 
    display: flex; 
    flex-wrap: wrap; 
}

span { 
    width: 80px; 
    background-color: cyan; 
    display:inline-block
}

<div>
<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>
</div>

<div><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span></div>

然后，您可以通过编程方式插入和删除span元素，它们仍然会根据需要换行到下一行。

这里有两个可能对你有用的想法：
1.或者使用flex +在<span>中添加填充来使用css
1.或者，如果您只需要一个空格，您可以简单地在<span>的前面/后面附加一个空格

// Second Example
for (let i = 0; i < 8; i++) {
  const element = document.querySelector('.parent-2');
  element.innerHTML = element.innerHTML + " <span>text</span>"
}

/* First Example */
.parent-1 {
  display: flex;
  flex-flow: row wrap;
}

.parent-1 span {
  padding-right: 4px;
}

.parent {
  width: 200px;
  border: 1px solid red;
  margin-bottom: 10px;
}

<!-- First Example -->
<div class="parent parent-1"><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span><span>text</span></div>

<!-- Second Example -->
<div class="parent parent-2"></div>