Question

一些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;
}

第二段的行为符合我的预期。

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

我的问题是，为什么inline-block范围会忽略 和span与前一个词之间的断行？

谢谢！

示例小提琴here。

Answer 1

因此，浏览器的行为似乎并不一致：

在IE11以及最近几个版本中，我已经能够对此进行测试，无论span是内联框还是内嵌框，IE都会尊重不间断的空间并且不会将span与其前一个词分开。
在所有其他浏览器中，行为如问题中所述。当span是内联块时，似乎忽略了不间断空格;相反，它被强制放在自己的行上并与前面的单词分开。请注意，不间断的空间仍然存在;它出现在第一行的末尾，就在单词之后，可以通过突出显示Firefox中的行来看到。

这里的其他人给出的解释看起来相当合理：内联块的格式就像一个块框，除了内联，所以这可能是它不总是与内联框行为相同的原因。但是，我还没有能够在规范中找到确认这一点的任何内容。它也没有解释为什么IE的行为方式，或者实际上IE是表现不正确还是不同。

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

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

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

我甚至查看了CSS3 Text模块，但关于换行符和原子内联的所有内容都是this：

替换元素或其他原子内联的换行行为等同于对象替换字符（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 Text模块的引用，也许浏览器没有正确实现某些控制字符，我无法肯定地说。但是，如果有的话，我开始怀疑这种行为是否真的在任何CSS规范中定义。

Answer 2

规范中似乎没有任何严格的答案，因为HTML和CSS规范没有定义断行的确切规则。 HTML 4.01 says：“有时作者可能希望防止在两个单词之间发生换行。  实体（ 或 ）充当用户代理不应导致换行的空间。“但它并不真正要求浏览器必须服从那个。

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

请注意，如果您删除 ，情况就相同。像“you.Entrepreneur”这样的字符串没有被破坏，但是如果你将“Entrepreneur”作为内联块，字符串可能会中断。

类似的考虑也适用于图像。浏览器可能不会在文字和图片之间尊重 ，因为在这里，字符之间也不会出现NO-BREAK SPACE。

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

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

为简单起见，我在示例中使用了nobr。您可以使用标准元素并在其上设置white-space: nowrap（此CSS属性，尽管其名称，不仅影响空格处理;此设置可防止内容中的换行符。）

Answer 3

我认为这是由于内联块将元素内部呈现为块。由于文本和跨度之间没有空格，因此它会强制中断然后将其放到不同的行上。

之前没有注意到它，所以它主要是猜测。

Answer 4

我唯一能找到的是

根据https://developer.mozilla.org/en-US/docs/Web/CSS/display

对于内联块

该元素生成一个块元素框，该框元素框将与周围的内容一起流动，就好像它是一个单独的内联框（行为很像被替换的元素）

内联

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

我猜是因为inline-block会生成一个块元素，所以不间断的空间无法按预期工作，而跨度通常只是inline

为什么内联块在非破坏空间后会中断？

4 个答案: