提问人：Enlico 提问时间：10/22/2023 最后编辑：Enlico 更新时间：10/23/2023 访问量：74
在发生换行时强制将空 <span> 移到下一行
Force empty <span> to next line when wrapping occurs
问：
以下代码片段为我生成了这个结果：
(边框只是轻松显示所有元素的快速方法，包括包含空格的<span>以及空的<span>s。它们不是解决方案的一部分)
我的目标是让第一个保持在原来的线上，第二个保持在下一行。foofoo
如果中间的“空格”一直不占用空间，那么它在哪里并不重要（在第一行之后或第二行之前）;但是，如果它最终显示为实际空间，那么我绝对希望它位于第一行的末尾。<span>foofoo
: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>在我的用例中，在任何给定时间都只有一个（实际上，它是移动的），但为了简单起见，我已经展示了两者。毕竟，我不排除在某些时候我可能想要展示其中的多个。foo<span class="foo"></span>
答：
0赞
Johannes
10/22/2023
#1
您可以在跨度上使用，在第二个跨度上用作选择器：float: leftclear: left;.foo.foo ~ .foo
:root {
font-size: 3em;
}
div {
border: 1px solid black;
width: 10rem;
}
span {
border: 1px solid black;
float: left;
}
.foo {
border-color: red;
}
.foo ~ .foo {
clear: left;
}<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>评论
0赞
Enlico
10/22/2023
这也大大减少了所有 <span> </span>s，因为一旦我删除边框s，所有文本似乎都是一个长词。
0赞
Johannes
10/23/2023
@Enlico 是的，但您的问题代码中已经是这种情况。默认情况下，span 是内联元素。
0赞
Enlico
10/23/2023
我在你的代码段和我的代码段中没有看到相同的间距。
0赞
Johannes
10/23/2023
@Enlico我愿意...（在 Firefox 上）
0赞
Enlico
10/23/2023
这是我在 Chromium 上看到的。它与Firefox不同吗？
0赞
Enlico
10/23/2023
#2
与另一个已删除的答案一样，下面的答案假设人们知道仅包含空格的 s 确实是该视觉线上的尾随元素。<span>
幸运的是，我手头有这些信息，因为我已经有一些 JavaScript 逻辑，将右行放在换行之前。foo
只要用一点 JavaScript 来坚持尾随空间似乎就可以了，从而得到预期的结果：display: flex;
我倾向于将其视为次优解决方案，因为它使用 JavaScript，所以我将等待其他答案。
let div = document.getElementsByTagName('div')[0];
// or any other way to get the parent of the <span>s
let findLastFoo = e => e.findLastIndex(s => s.classList.contains('foo'));
// or any other way to get the <span class="foo"></span> to be sent to newline
div.children[findLastFoo(Array.from(div.children)) - 1].classList.add('trailing-space');:root {
font-size: 3em;
}
div {
border: 1px solid black;
width: 10rem;
}
span {
border: 1px solid black;
}
.foo {
border-color: red;
}
.trailing-space {
display: flex;
}<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>
评论