Css 为什么内联块在非中断空间后中断？

一些HTML代码：

你好，世界你好。企业家
你好，世界你好。企业家

一些CSS：

#一个跨度{
显示：内联块；
}
p{
字体系列：Arial；
字体大小：16px；
宽度：200px；
}

第二段的行为与我预期的一样

但是，由于跨距是一个内联块，第一个块的行为不同

我的问题是，

内联块

span为什么会忽略

，并在

span

和前面的单词之间换行

谢谢

---

fiddle示例。

我认为这是由于内联块将元素内部渲染为块。由于文本和跨距之间没有空格，因此会强制打断，然后将其放到另一行

---

虽然之前没有注意到，但这主要是猜测。

我能找到的唯一东西是

据

用于内联块

元素生成一个块元素框，该框将与周围的内容一起流动，就像它是一个单独的内联框一样（其行为与替换的元素非常相似）

内联

元素生成一个或多个内联元素框

---

我猜，由于

内联块

生成了一个块元素，因此在跨度通常为

内联块的情况下，非中断空间没有按预期工作，因此，在不同浏览器中，行为似乎不一致：


在IE11和最近几个版本中，我已经能够测试这一点，无论
span
是内联框还是内联块框，即尊重无中断空间，并且不会将
span
与其前面的单词分开

在所有其他浏览器中，行为如问题中所述。当
span
是内联块时，无中断空间似乎被忽略；取而代之的是，它被迫走上自己的路线，与前面的单词分开。请注意，无中断空间仍然存在；它出现在第一行的末尾，就在单词的后面，可以通过在Firefox中突出显示该行来查看


其他一些人给出的解释似乎相当合理：内联块的格式类似于块框，除了内联放置外，这可能是它的行为不总是与内联框相同的原因。然而，我还没有在规范中找到任何能证实这一点的东西。它也不能解释IE为什么会这样做，也不能解释IE是否行为不正确或只是有所不同

CSS2.1规范在中确实说明了以下内容，这非常符合上述解释：

非内联框的内联级别框（如替换的内联级别元素、内联块元素和内联表元素）称为原子内联级别框，因为它们作为单个不透明框参与其内联格式上下文

但它并没有完全描述换行符和原子内联级别框之间的交互，更不用说无换行空间对这种交互的影响了。因此，不幸的是，对于任何一个浏览器的行为似乎都没有足够的解释


我甚至查看了CSS3文本模块，但关于换行符和原子内联线，它要说的是：


被替换元素或其他原子内联的换行行为等同于对象替换字符（U+FFFC）的换行行为

。。。当我尝试使用U+FFFC时：

你好，世界你好。企业家
你好，世界你好。企业家

你好，世界你好࿼


即：


IE表现最为一致，以相同的方式打断所有三段

Firefox以与第二段相同的方式使用字符断行，这与不间断空格有关

Chrome甚至不尝试渲染角色


也许我只是误解了CSS3文本模块的引用，也许浏览器没有正确实现某些控制字符，我不能肯定。但是，如果有什么区别的话，我开始怀疑这种行为是否真的在任何CSS规范中都有定义。
规范中似乎没有任何严格的答案，因为HTML和CSS规范没有定义断行的确切规则。：“有时作者可能希望防止两个单词之间出现换行。
实体（
&&160；
或
&&xA0；
）充当用户代理不应导致换行的空间。”但实际上并不要求浏览器必须遵守这一点

不将
视为在内联块之前防止换行的浏览器可以通过说
仅代表不换行空格*字符来证明这一点，该字符（在Unicode中）定义为在字符之间出现时防止换行。在这里，它位于字符和内联块元素之间，内联块元素（非正式地说）在行格式中被视为一个黑框，即它占用一些空间，但不被视为字符或包含字符

请注意，如果卸下
，情况相同。像“you.enterpriser”这样的字符串不会断开，但如果将“enterpriser”设为内联块，则该字符串可能会断开

类似的考虑也适用于图像。浏览器可能不支持文本和图像之间的
，因为在这里，字符之间也不会出现不间断的空格

您仍然可以防止换行，但需要更加明确，例如

<p>Hello World how are <nobr>you.&nbsp;<span>Entrepreneur</span></nobr></p>

你好，世界你好。企业家


为了简单起见，我在示例中使用了
nobr
。您可以改为使用标准元素并设置
w
<p>Hello World how are <nobr>you.&nbsp;<span>Entrepreneur</span></nobr></p>