理解溢出的行块元素的包装行为:隐藏。

I want two inline-block elements to remain on the same row, regardless of their width or margin.

我希望两个inline-block元素保持在相同的行上，不管它们的宽度或边缘。

The quick solution is to apply white-space: nowrap to the container. Flex and floats are alternatives that also work.

快速的解决方案是将空格应用到容器中:nowrap。Flex和float是另外一种工作方式。

I'm just stuck on figuring out a particular wrapping behavior with white-space: normal.

我只是在用空白区找出一个特殊的包装行为:正常。

Here's the situation:

的现状是:

There are two inline-block elements in a block-level container.
块级容器中有两个内联块元素。
The width of the container is fixed at 500px.
容器的宽度固定在500px。
The width of each child is fixed at 200px.
每个孩子的宽度固定在200px。
The container is set to overflow: hidden.
容器被设置为溢出:隐藏。

With or without white-space: nowrap, Box A will never wrap. The size of its width or margin-left doesn't matter; Box A will simply disappear into the void of overflow: hidden.

不管有没有空格:nowrap, Box A永远不会包装。它的宽度或左边缘的大小并不重要;A将会消失在溢出的空隙中:隐藏。

Here's Box A with margin-left: 400px (container has overflow: hidden; white-space: normal):

这是A框，左边框:400px(容器溢出:隐藏;空白:正常):

Notice in the image above how Box B has wrapped. It did not disappear into overflow: hidden.

请注意上图中B框是如何包装的。它没有消失成溢流:隐藏着。

Here's Box B with margin-left: 250px (container unchanged from above; box A reset):

这是空格B，左:250px(容器从上往下没有变化;框重置):

Here's Box B with margin-left: 400px:

这是B框，左:400px:

Unlike Box A, Box B refuses to stay on the first line and just hide.

与A盒子不同的是，B盒子拒绝呆在第一行，只是躲起来。

So the rule seems to be:

所以规则似乎是:

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.

使用空格:正常，只有行上的第一个元素会表示溢出:隐藏。后续元素将包装，但要注意溢出:隐藏在后续行上。

Testing this theory with a third element seems to prove it correct:

用第三个元素来检验这个理论似乎证明了它的正确性:

Here's Box B with margin-left: 350px and a new Box C with margin-left: 350px:

这是空格B，左:350px，新空格C，左:350px:

So it seems that one element cannot force another element to respect overflow: hidden on their common parent.

因此，似乎一个元素不能强迫另一个元素尊重溢出:隐藏在它们共同的父元素上。

Anybody know exactly what's going on, and/or where in the spec this behavior is defined?

有人知道到底发生了什么，或者在规范中定义了这种行为吗?

Is this an issue of overflow, wrapping, inline-block, or maybe a combination of factors?

这是一个溢出、包装、内联块的问题，还是一个因素的组合?

I've checked here but didn't find anything: https://drafts.csswg.org/css-text-3/#white-space-property

我在这里检查过，但是没有发现任何东西:https://drafts.csswg.org/css-text-3/#white-space属性

Playground

操场上

1 个解决方案

#1

From my answer to this related question:

从我对这个相关问题的回答:

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.

容器上的溢出值不影响其内容是否或何时溢出;它只在发生溢出时更改它及其内容的呈现方式。

And from the 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.

线不能被破坏，导致线框比块框宽。

This is why, in white-space: normal, line-break opportunities are presented by whitespace, and inline-level boxes will wrap at any opportunity they get. This includes inline-blocks. Inline-level boxes will only overflow their container if they cannot wrap, for any reason. Otherwise they will wrap.

这就是为什么在空白空间中:正常情况下，断行机会是由空白空间提供的，而在它们得到的任何机会时，内联级框都会被包装起来。这包括inline-blocks。由于任何原因，如果不能包装，内线级别的盒子将只能溢出它们的容器。否则他们将包裹。

Since an inline-block has the same rigid physical structure as a block container box, it's impossible for an inline-block to "break apart" or wrap when it's the only inline-level box on a given line box. This is why overflow occurs (even when the current line is not the first line) when the box cannot fit the bounds of its line box, for any reason, including when it's being offset by a horizontal margin.

由于inline块具有与块容器盒相同的刚性物理结构，当一个inline块是给定行盒上唯一的inline-level盒时，它不可能“分解”或“包装”。这就是为什么当框不能满足其行框的边界时(即使当前行不是第一行)会发生溢出，因为任何原因，包括当它被水平边距抵消时。

Curiously, the behavior of no-break spaces with respect to inline-blocks is not consistent across browsers. No one knows why.

奇怪的是，对于行块，不间断空格的行为在不同浏览器中并不一致。没有人知道为什么。

#1