一个非常黑客的方式使用谨慎，工程只为您的具体情况

p {
  display: grid;
  grid-auto-flow: dense;
  justify-content: start;
  gap: 5px;
}

.foo {
  grid-row: 2;
  grid-column: span 2;
}

<p>One <span class="foo">Two</span> Three</p>

这有点脆弱，但可以修改得不那么脆弱，比如为p元素添加一个底部填充区域，以确保span有空间：

p {position: relative;}
span {position: absolute; top: 100%; left: 0;}

<p>One <span class="foo">Two</span> Three</p>

grid和flex可以在这里提供帮助：最短的CSS方法是grid +order，但是它会把所有东西堆成3行

.g {
  display: grid;
}

.foo {
  order: 2
}

<p class="g">One <span class="foo">Two</span> Three</p>

Flex也可以沿着，只要span必须在它所在的文本下面换行。

p.f {
  display: flex;
  flex-wrap: wrap;
}

p.f .foo {
  order: 2;
  flex-basis: 100%;
}

<p class="f">One <span class="foo">Two</span> Three</p>

flex和grid可以为您提供一些选项来对文本和单词之间的标签进行排序和重新排序。下面是几个测试示例：网格可以轻松地将所有内容显示在一列中，每个单词将位于不同的行上。Flex可以给予你更多的选择，一列类似网格，但也在一行，在那里你可以发送标签到前面或容器的末尾。这只是视觉上的。

p {
  border: solid;
  margin: 1em;
}

p.if {
  display: inline-flex;
  flex-wrap: wrap;
}

p.f {
  display: flex;
  flex-wrap: wrap;
}

p.fc {
  display: flex;
  flex-direction: column;
}

p.g {
  display: grid
}

p.ifc {
  display: inline-flex;
  flex-direction: column;
}

p.ig {
  display: inline-grid
}

.f .foo,
.if .foo {
  min-width: 100%;
}

.foo {
  order: 2;
  border: solid;
}

.bar {
  order: -1
}

<h3>grid blocks</h3>
<h4>flex</h4>
<p class="f">One <span class="foo">Two</span> Three <span class="bar">- </span></p>
<p class="fc">One <span class="foo">Two</span> Three <span class="bar">- </span></p>
<h4>grid</h4>
<p class="g">One <span class="foo">Two</span> Three <span class="bar">- </span></p>
<h3>inline grid blocks</h3>
<h4>inline-flex</h4>
<p class="if">One <span class="foo">Two</span> Three <span class="bar">- </span></p>
<p class="ifc">One <span class="foo">Two</span> Three <span class="bar">- </span></p>
<h4>inline-grid</h4>
<p class="ig">One <span class="foo">Two</span> Three <span class="bar">- </span></p>