带有“white-space: normal”的内联块 div 超过了带有“white-space: nowrap”的父级的宽度答案

【问题标题】：An inline-block div with "white-space: normal" exceeds the width of a parent with "white-space: nowrap"带有“white-space: normal”的内联块 div 超过了带有“white-space: nowrap”的父级的宽度
【发布时间】：2014-04-03 07:43:52
【问题描述】：

我试图在一行中放置几个元素，以便它们都适合容器的宽度。为了防止它们自动换行，我在父级中添加了“white-space: nowrap”，并在子级中添加了“white-space: normal”以允许他们换行（根据需要）。

问题是在这种配置下，最右边的孩子有时会超过父母的宽度。

HTML：

<div id="container">
    <div class="child">
        child 1
    </div>
    <div class="child">
        child 2 text that might be long enough to wrap, but still exceed the parent
    </div>
</div>

CSS：

#container {
    white-space: nowrap;
    width: 200px;
    background: yellow;
    border: 1px solid brown;
    padding: 5px;
}

.child {
    display: inline-block;
    border: 2px solid red;
    vertical-align: top;
    white-space: normal;
}

http://jsfiddle.net/7e5TU/1/（如果问题没有立即出现，请更改文本的长度）。

我知道我可以用一张桌子来解决它，可能在左边的孩子上有一个浮点数，右边是“溢出：隐藏”，但我看不出为什么这不起作用。

谁能提供一些见解？我最想了解盒子模型中的什么导致了这种行为。谢谢！

【问题讨论】：

这是预期的行为。通过使用white-space: nowrap; 作为父级，您已经折叠了内联（-block）元素之间的空格。 white-space 对待孩子，而不是元素本身。
谢谢哈希姆。我理解这一点，并考虑一下我明白我试图实现的目标可能不合理。我认为让我失望的是正确的孩子确实包裹了文本，但是（正如我现在意识到的那样）被扩大到父母的宽度。
@HashemQolami “......空白对待孩子，而不是元素本身。”。这是不正确的 - 请参阅w3.org/TR/CSS2/text.html#white-space-prop“此属性声明如何处理元素内的空白。”！
@Netsurfer 没错，white space inside the element 表示内联节点之间，无论是文本本身还是内联（-block）元素。
@Sasha 是的，当涉及到white-space 时，您的 HTML 标记起着重要作用，因为任何换行符、空格、制表符或新行都会影响呈现。谷歌会给你很多关于这方面的资源。是的，扩展到父级宽度（减去父级的给定填充）是inline-block 元素的正常行为。

标签： html css

【解决方案1】：

我同意@hashem 这是预期的行为。通过将white-space: nowrap; 用作父元素，您已经折叠了inline(-block) 元素之间的空格。 white-space 对待孩子，而不是元素本身。

好吧，如果您仍然需要修复，您可以将 width 添加到第二个孩子以使其适合 container。

fiddle

例如

.child2
{
    width: 70%;
}

【讨论】：

【解决方案2】：

如果你愿意使用 flexbox (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)，你可以这样做： http://jsfiddle.net/7e5TU/6/

HTML

<div id="container">
    <div class="child1">
        child 1
    </div><div class="child2">
        child 2 text that might be long enough to wrap, 
        but still exceed the parent
    </div>
</div>

CSS

#container {
    width: 200px;
    background: yellow;
    border: 1px solid brown;
    padding: 5px;
    display: flex;
    flex-direction: row
}

.child1, .child2 {
    display: block;
    border: 1px solid red;
    vertical-align: top;
}

.child1 {
    min-width: 50px;   
}

【讨论】：

感谢马蒂亚斯！我用有点冒险的表格方法解决了这个问题 - 但感谢分享，我以前没有读过关于 flexbox 的内容。

【解决方案3】：

您可以使用 CSS display:table 来做到这一点。这种方式不需要尺寸细节。它确保元素保持在一行中，并且文本将完美地包裹到父容器的宽度。

HTML

<div class='container'>
  <div class='field'>
    <div class='data'>
      child 1
    </div>
  </div>
  <div class='field'>
    <div class='data'>
      child 2 text that might be long enough to wrap, but still exceed the parent
    </div>
  </div>
</div>

CSS

.container {
  display: inline-table;
  border-spacing: 4px;
  background: yellow; border: 1px solid brown;
  padding: 5px;
}
.field {
  display: table-cell;
}
.data {
  border: 2px solid red;
  padding: 3px;
}

【讨论】：