Css `空白区：nowrap'古怪

在对两个

span

元素使用

空白：nowrap

时，我遇到了一个奇怪的情况

它不仅可以防止

span

中的换行，还可以防止

span

元素之间的换行

如果我将

span

元素相邻地放在代码的同一行上，则第二个

span

元素不能放到下一行

如果我将相同的

span

元素放置在不同的行上（或在行与行之间使用空格），则第二个span将下降

根据规则，空格应该只处理元素内部的空格

如果两个

span

元素的总宽度都比容器

div

宽，如何获得第二个span将下降的行为？（仅使用CSS，同时将文本保持在同一行的范围内）

span{
空白：nowrap；
}
div{
宽度：5em；
填充：1em；
边框：1px纯黑；
边缘：0.5em；
}

你好。我一点也不包！
你好。
我做包装！！！

好的，这是您的问题

它实际上不是一个bug。
发生的情况是，

父div的默认displaycss属性是inline

在代码中添加中断符时，浏览器会将其解释为新行，因此

元素会放置在新行上。通过简单地给第一个div中的span元素一个display:block属性，解决了这个问题

span{
空白：nowrap；
}
div{
宽度：5em；
填充：1em；
边框：1px纯黑；
边缘：0.5em；
}

你好。我一点也不包！
你好。
我一点也不包！

好的，因为denmch没有发布正式答案，所以我会自己发布。我想是怎么回事

由于跨距相邻，没有换行符或间距，因此浏览器使用

空白：nowrap作为单个单词。基本上是这样的：


span{
颜色：红色；
}
您好
跨距之间没有空格，因此应该在哪里进行换行？如果您希望在特定上下文中始终断开跨距，则给父级一个公共类，然后选择子跨距并将显示设置为
内联块
，例如，
.my parent class>span{display:inline block；}
。这就是你想要的吗？@denmch。如果
span
元素不适合一行，则基本上应该在它们之间添加

。但只使用css。@denmch实际上这正是我想要的。这很简单，我有一个脸掌时刻xD。别难过，@RMo。我昨天刚刚告诉一位同事，我觉得自己不知道一些事情就像一个彻头彻尾的骗子，他向我保证，如果你一周不这样想一次，那就是你做错了什么。事实上，
display:block
是行不通的。因为如果文本与另一个跨距相邻，也会将其放置在新行上。将其更改为内联块，请在不修改html的情况下回答，因为我一直在明确寻找css解决方案。你表现得非常敌对，你的问题是什么？嗯，这一点也不敌对。我只是想得到一个好的答案，供其他人将来参考。denmch已经在评论中给出了这一点。但我不认为他会给出正式的回答。我不知道OP的问题是什么，但我知道你的回答正好解决了我的问题。。。因此，它实际上对将来的参考很有用。