换行时强制空<span>元素换行的技术实现问询

以下代码片段生成了如下效果：

（设置border仅为快速直观展示所有元素，包括含空格的<span>和空<span>，并非解决方案的组成部分）

我的需求是让第一个foo留在当前行，第二个foo移至下一行。若中间的空格<span>不占用空间，其位置无关紧要（可在第一行的foo之后或第二行的foo之前）；但若它显示为实际空格，则必须位于第一行末尾。

代码示例 #

CSS 代码

:root {
  font-size: 3em;
}
div {
  border: 1px solid black;
  width: 10rem;
}
span {
  border: 1px solid black;
}
.foo {
  border-color: red;
}

HTML 代码

<div>
<span>a</span><!--
--><span>a</span><!--
--><span>a</span><!--
--><span> </span><!--
--><span>a</span><!--
--><span>a</span><!--
--><span>a</span><!--
--><span>a</span><!--
--><span>a</span><!--
--><span>a</span><!--
--><span>a</span><!--
--><span>a</span><!--
--><span>a</span><!--
--><span>a</span><!--
--><span class="foo"></span><!--
--><span> </span><!--
--><span class="foo"></span><!--
--><span>a</span><!--
--><span>a</span><!--
--><span>a</span><!--
--><span>a</span><!--
--><span>a</span><!--
--><span>a</span><!--
--><span>a</span><!--
--><span>a</span><!--
--><span>a</span><!--
--><span>a</span>
</div>

实际场景中，同一时间仅存在一个foo（该<span class="foo"></span>会被动态移动），此处展示两个仅为简化说明，不排除后续需要展示多个的可能。

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