`white-space：nowrap`怪异

Question

我在两个white-space: nowrap元素上使用span时遇到了一个奇怪的情况。

它还可以防止span元素之间的换行，而不是阻止span中的换行符。

如果我将span元素放在我的代码的同一行旁边，那么第二个span就不会掉到下一行。

如果我将相同的span元素放在不同的行上（或使用其间的空格），则第二个跨度将下降。

根据MDN documentation，空格应该只处理元素内的空间。

如果两个span元素的总宽度比容器div宽，我怎样才能得到第二个跨度下降的行为？ （仅限CSS，同时将文本保持在同一行的范围内）

span{
  white-space: nowrap;
}
div{
  width: 5em;
  padding: 1em;
  border: 1px solid black;
  margin: 0.5em;
}

<div>
  <span>Hello there.</span><span> I don t wrap at all!</span>
</div>
<div>
  <span>Hello there.</span>
  <span>I do wrap!!!</span>
</div>

Answer 1

好吧，既然denmch没有发表正式答案，我会自己发布。而我的想法正在发生。

因为跨度是彼此相邻而没有在其间的换行符或空格，所以浏览器将white-space: nowrap;解释为两个span元素作为单个单词。基本上是这样的：

span{
  color: red;
}

<p><span>He</span>llo</p>

在这种情况下，不包装这个词是有道理的。所以这就是内联元素的行为方式。我们可以简单地将display改为display: inline-block。现在元素失去了它在inline元素时的行为。

因此我们可以添加display: inline-block。现在它将跨度内的文本视为单个单词，如果两个span元素的内容不适合div的宽度，则相关跨度将下降：

span{
  display: inline-block;
  white-space: nowrap;
}
div{
  width: 15em;
  padding: 1em;
  border: 1px solid black;
  margin: 0.5em;
}

<div>
  <span>Hello there.</span><span>I don t wrap at all!</span>
</div>
<div>
  <span>Hello there.</span>
  <span>I do wrap!!!</span>
</div>

希望它有用:)

Answer 2

好的，这是你的问题。

这实际上不是一个bug。 发生的事情是，<span>父div的默认显示CSS属性是内联的

当您在代码中添加中断时，浏览器会将其解释为新行，因此<span>元素将放置在新行上。通过简单地给第一个div中的span元素显示display：block的属性来修复问题。

span{
  white-space: nowrap;
}
div{
  width: 5em;
  padding: 1em;
  border: 1px solid black;
  margin: 0.5em;
}

<div>
  <span>Hello there.</span><span style='display:block;'> I don t wrap at all!</span>
</div>
<div>
  <span>Hello there.</span>
  <span>I don t wrap at all!</span>
</div>

编辑：

denmch确实说明了一点，在我的回答中，我只是调试了你的帖子，或者想着你在说什么。你不明白什么是white-space：nowrap;确实。您的问题涉及根本没有包装的元素的位置。

编辑：

这只是为了澄清OP：

您的问题涉及浏览器中HTML和CSS属性的默认处理。因此，他的HTML无法实现纯粹的CSS解决方案。

请参阅：https://www.w3schools.com/cssref/pr_class_display.asp