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元素解释为单个单词。基本上是这样的：

＆＃13;

span{
  color: red;
}

＆＃13;

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

＆＃13;

在这种情况下，不包装这个词是有意义的。所以这就是内联元素的行为方式。我们只需将display更改为display: inline-block即可。现在元素失去了inline元素时的行为。

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

＆＃13;

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

＆＃13;

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

＆＃13;

希望它有用：）