换行时强制清空<span>到下一行

Question

以下代码片段为我生成了这个结果：

我的目标是让第一个

foo

保持在原来的线上，第二个

foo

保持在下一行。

如果中间的“空格”

<span>

一直不占空间，那么它在哪里并不重要（第一行

foo

之后或第二行

foo

之前）；但如果它最终显示为一个实际的空间，那么我肯定希望它出现在第一行的末尾。

在我的用例中，在任何给定时间都只有一个

foo

，但为了简单起见，我展示了两者。

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

<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>

Answer 1

您尝试过使用换行标签吗

<br>

？

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

<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><!--
--><br /><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>