了解带有溢出的内联块元素的包装行为：隐藏 [英] Understanding the wrapping behavior of inline-block elements with overflow:hidden

问题描述

我希望两个 inline-block 元素保留在同一行上，而不管它们的宽度或 margin 。

快速解决方案是应用 white-space：nowrap 到容器。

我只是在用 white-space：normal 来计算特定的包装行为， code>。

以下是这种情况：

1. 块级容器中的 inline-block 元素。


2. 容器的宽度固定为500px。


3. 每个子项的宽度固定为200px。
   
4. 容器设置为 overflow：hidden 。

或者没有 white-space：nowrap ，框A永远不会换行。它的大小 width 或 margin-left 并不重要;方框A将简单地消失在 overflow：hidden 的无效中。

这里的方框A带有 margin-left：400px （容器有 overflow：hidden; white-space：normal ）：

请注意，上图中的图片B是如何包装的。它 没有消失到 overflow：hidden 。

c $ c> margin-left：250px （容器从上面保持不变; box重置）：

以下是包含 margin-left：400px 的Box B：

与盒子A不同，盒子B拒绝留在第一行，只是隐藏。

所以规则似乎是：

lockquote

white-space：normal ，只有线上的第一个元素会遵循 overflow：hidden 。后续元素将在后续行中进行换行，但要尊重 overflow：hidden 。

测试这个理论与第三个元素似乎证明它是正确的：

这里是包含 margin-left：350px 的Box B和一个带有 margin-left：350px ：

Playground

解决方案

从我的回答：

通常，内联级别的框他们尽可能避免溢出他们的容器。

容器上的 overflow 的值不会影响 或何时其内容溢出;它只会改变它和它的内容的呈现方式，当溢出发生时。

a href =https://www.w3.org/TR/CSS21/visufx.html#overflow-clipping =nofollow noreferrer>规范：

通常，块框的内容仅限于框的内容边缘。在某些情况下，一个盒子可能会溢出，这意味着它的内容部分或全部位于盒子外面，例如：

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

这就是为什么在 white-space：normal ，换行机会由空白表示，内联级别的框会在任何机会时换行。这包括内联块。内联级别的框只有当 包装时才会溢出其容器，原因不明。由于内嵌块与块容器盒具有相同的刚性物理结构，所以内联块不可能分开或当它是给定线框上唯一的内联级别框时进行换行。这就是为什么当盒子因为任何原因（包括当它被一个水平边距偏移时）不能适合其线框边界时发生溢出（即使当前线不是第一条线）的原因。

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

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

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

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

Here's the situation:

1. There are two inline-block elements in a block-level container.
2. The width of the container is fixed at 500px.
3. The width of each child is fixed at 200px.
4. 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.

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

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

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

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

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

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:

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

Playground

解决方案

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.

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.

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

这篇关于了解带有溢出的内联块元素的包装行为：隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！