css – 为什么内部块在不间断的空间之后中断？

一些HTML代码：

<p id='one'>Hello World how are you.&nbsp;<span>Entrepreneur</span></p>

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

一些CSS：

#one span {
  display: inline-block;
}

p {
  font-family: Arial;
  font-size: 16px;
  width: 200px;
}

第二段表现如我所料。

然而，第一个行为是不同的，因为跨度是一个内联块。

我的问题是，为什么内嵌块跨度忽略& nbsp;并跨越和前一个词之间的分界线？

谢谢！

示例小提琴here。

解决方法

因此，浏览器的行为看起来不一致：

>在IE11和最后几个版本中，我已经能够测试这一点，无论跨度是一个内嵌框还是一个内嵌框，IE都遵循无休止空格，并不会将span与前一个单词分开。
>在所有其他浏览器中，行为如问题所述。当跨度是内嵌块时，无休止空间似乎被忽略;相反，它被强制到自己的线上，与之前的单词分离。请注意，无休止的空间依然存在;它出现在第一行的末尾，就在字之后，可以通过在Firefox中突出显示该行来看到。

一些其他人在这里给出的解释似乎相当的声音：一个内联块被格式化为一个块框，除了内置，这可能是一个原因，它不总是与内联框一样的行为。但是，我无法在规范中找到任何证实这一点的内容。 IE也不会解释为什么IE的行为方式，或者IE的行为是不正确的还是不同的。

CSS2.1规范在section 9.2.2中说明了以下说明：

Inline-level Boxes that are not inline Boxes (such as replaced inline-level elements,inline-block elements,and inline-table elements) are called atomic inline-level Boxes because they participate in their inline formatting context as a single opaque Box.

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

我甚至在CSS3文本模块中看到，但是对于换行符和原子内联来说，它必须说的是this：

• The line breaking behavior of a replaced element or other atomic inline is equivalent to that of the Object Replacement Character (U+FFFC).

…当我用U FFFC，the results are completely unreliable：

<p id='one'>Hello World how are you.&nbsp;<span>Entrepreneur</span></p>

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

<p>Hello World how are you.&nbsp;&#xfffc;</p>

即：

> IE行为最为一致，以同样的方式打破所有三个段落。
> Firefox以与第二段相同的方式打破字符串，尊重无休止空间。
> Chrome甚至不会尝试渲染角色。

也许我只是误解了CSS3文本模块的引用，也许浏览器没有正确地执行某些控制字符，我不能肯定地说。但是，如果有什么，我开始怀疑这个行为是否真的在任何CSS规范中定义。

原文地址：https://www.jb51.cc/css/218215.html