使用 overflow:hidden 了解 inline-block 元素的环绕行为
Understanding the wrapping behavior of inline-block elements with overflow:hidden
我希望两个 inline-block 元素保持在同一行，无论它们是 width 还是 margin。
快速解决方案是将 white-space: nowrap 应用于容器。 Flex 和浮动是同样有效的替代方法。
我只是想弄清楚 white-space: normal 的特定包装行为。
情况如下：
- block-level 容器中有两个
inline-block 元素。
- 容器的宽度固定为 500px。
- 每个child的宽度固定为200px。
- 容器设置为
overflow: hidden。
有或没有white-space: nowrap，盒子A永远不会换行。 width 或 margin-left 的大小无关紧要；方框 A 将消失在 overflow: hidden.
的空隙中
这是带 margin-left: 400px 的盒子 A（容器有 overflow: hidden; white-space: normal）：
注意上图中盒子 B 是如何包装的。它没有消失在overflow: hidden。
这是带 margin-left: 250px 的盒子 B（容器与上面相同；盒子 A 重置）：
这是方框 B margin-left: 400px:
与盒子A不同，盒子B拒绝停留在第一行，只是躲起来。
所以规则似乎是：
With white-space: normal, only the first element on the line will respect overflow: hidden. Subsequent elements will wrap but respect overflow: hidden on subsequent lines.
用第三个元素测试这个理论似乎证明它是正确的：
这是带有 margin-left: 350px 的方框 B 和带有 margin-left: 350px 的新方框 C：
所以似乎一个元素不能强迫另一个元素尊重overflow: hidden他们共同的parent。
有人确切地知道发生了什么，and/or规范中在哪里定义了这种行为？
这是溢出、环绕、inline-block 还是综合因素的问题？
我已经检查过这里但没有找到任何东西：
https://drafts.csswg.org/css-text-3/#white-space-property
来自我对 的回答：
Generally, inline-level boxes do their best to avoid overflowing their containers as much as possible. [...]
The value of overflow on a container doesn't influence whether or when its contents overflow; it only changes how it and its contents are rendered, when overflow does occur.
并且来自 spec：
Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:
- A line cannot be broken, causing the line box to be wider than the block box.
这就是为什么在 white-space: normal 中，换行机会由空格提供，行内框会在任何机会换行。这包括内联块。行内层框只有在 不能 换行时才会溢出容器，无论出于何种原因。否则他们会换行。
由于内联块与块容器盒具有相同的刚性物理结构，因此当内联块是给定行盒上唯一的内联级盒时，它不可能“分开”或换行。这就是为什么当框由于任何原因无法容纳其行框的边界时（即使当前行不是第一行）发生溢出的原因，包括当它被水平边距偏移时。
奇怪的是，不间断空格对于行内块的行为是 not consistent across browsers。没人知道为什么。
我希望两个 inline-block 元素保持在同一行，无论它们是 width 还是 margin。
快速解决方案是将 white-space: nowrap 应用于容器。 Flex 和浮动是同样有效的替代方法。
我只是想弄清楚 white-space: normal 的特定包装行为。
情况如下：
- block-level 容器中有两个
inline-block元素。 - 容器的宽度固定为 500px。
- 每个child的宽度固定为200px。
- 容器设置为
overflow: hidden。
有或没有white-space: nowrap，盒子A永远不会换行。 width 或 margin-left 的大小无关紧要；方框 A 将消失在 overflow: hidden.
这是带 margin-left: 400px 的盒子 A（容器有 overflow: hidden; white-space: normal）：
注意上图中盒子 B 是如何包装的。它没有消失在overflow: hidden。
这是带 margin-left: 250px 的盒子 B（容器与上面相同；盒子 A 重置）：
这是方框 B margin-left: 400px:
与盒子A不同，盒子B拒绝停留在第一行，只是躲起来。
所以规则似乎是：
With
white-space: normal, only the first element on the line will respectoverflow: hidden. Subsequent elements will wrap but respectoverflow: hiddenon subsequent lines.
用第三个元素测试这个理论似乎证明它是正确的：
这是带有 margin-left: 350px 的方框 B 和带有 margin-left: 350px 的新方框 C：
所以似乎一个元素不能强迫另一个元素尊重overflow: hidden他们共同的parent。
有人确切地知道发生了什么，and/or规范中在哪里定义了这种行为？
这是溢出、环绕、inline-block 还是综合因素的问题？
我已经检查过这里但没有找到任何东西： https://drafts.csswg.org/css-text-3/#white-space-property
来自我对
Generally, inline-level boxes do their best to avoid overflowing their containers as much as possible. [...]
The value of
overflowon a container doesn't influence whether or when its contents overflow; it only changes how it and its contents are rendered, when overflow does occur.
并且来自 spec：
Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:
- A line cannot be broken, causing the line box to be wider than the block box.
这就是为什么在 white-space: normal 中，换行机会由空格提供，行内框会在任何机会换行。这包括内联块。行内层框只有在 不能 换行时才会溢出容器，无论出于何种原因。否则他们会换行。
由于内联块与块容器盒具有相同的刚性物理结构，因此当内联块是给定行盒上唯一的内联级盒时，它不可能“分开”或换行。这就是为什么当框由于任何原因无法容纳其行框的边界时（即使当前行不是第一行）发生溢出的原因，包括当它被水平边距偏移时。
奇怪的是，不间断空格对于行内块的行为是 not consistent across browsers。没人知道为什么。