Question

我遇到了一种非常奇怪的行为，其中包含overflow: hidden，white-space: nowrap和width: 50%的元素强制其包含元素展开以适应所有文本，即使它由宽度声明约束（并且实际上不可见）。在容器上设置特定宽度或使用overflow: hidden也无济于事。但是，将绝对值设置为所讨论元素的宽度可以解决问题，但我不想使用绝对值。

示例：http://jsbin.com/loxuz/3（黄色框应仅为灰色框的50％，但正在扩展以适应蓝色框中的所有文本，即使宽度受限制。）

有人在这里看到任何明显错误吗？包含的元素是否应该具有宽度，并且它与我使用百分比的事实有什么关系？我不认为可能是这种情况，因为宽度应该从容器向上继承，对吧？而不是向下表示文本元素。我能找到的唯一解释是white-space: nowrap引起了这种情况。删除它会使容器具有正确的宽度，但也会导致文本的包装，这是我不想要的。

有没有人知道这方面的解决方案，或有任何见解？：）

Answer 1

对于不符合指定宽度的字段集问题，快速解决方法是向元素添加Entry：

即

min-width: 0

Answer 2

这是你想要的吗？ DEMO: http://jsbin.com/tifefase/1/。您应该从max-width: 50%移除span并为width: 50% div写#second。如果您想使用fieldset，这就是您要寻找的答案。

#second {
  width:50%; 
  border:yellow 1px solid;
}

span {
  overflow:hidden;
  white-space:nowrap;
  outline:blue 1px solid;
  display:block;
}

但是如果您使用div而不是fieldset，则可以继续使用当前值。 SEE THE NEW DEMO使用div代替fieldset。

#second {
  width:50%; 
}

#third {
  width:100%; 
  border:yellow 1px solid;
}

CSS white-space：nowrap导致容器扩展以适合所有文本

2 个答案: