html - CSS - 宽度与高度 - 宽度优先

Question

我遇到了一个似乎没有在任何地方得到解决的非常具体的问题。当我在包含的 div 上同时设置固定宽度和高度时，div 内的任何文本只会垂直溢出，而不会水平溢出。

Example here: http://jsfiddle.net/TgPRM/1382/

#container {
   height:50px;
   max-height:50px;
   width:50px;
}

现在即使我将文本包装在一个段落中并在该段落上设置固定的高度/最大高度(但不是宽度!)，甚至更奇怪的宽度也有优先权。文本选择不尊重其父元素上设置的高度，而是尊重其祖父元素上设置的宽度。

Example here: http://jsfiddle.net/TgPRM/1377/

我的问题是，为什么给予宽度 如此高的优先级？我们可以做些什么来使文本水平溢出而不是垂直溢出？

编辑:我想保持 overflow:visible 因此任何基于 overflow 属性的解决方案都不能解决我的问题。 White-space:nowrap 似乎是一个有点极端的解决方案，因为它甚至不考虑浏览器窗口尺寸(尝试非常非常长的文本)。因此，我接受了 Evan 的解决方案，因为它的工作方式与我预期的示例完全一样。

Answer 1

这不是优先级——它是简单的自动换行。如果你的单词很长，你可以检查它(http://jsfiddle.net/sergdenisov/y4wkmvcs/1/):

<div id="container">
    <p>hello_this_is_a_very_long_long_long_long_paragraph</p>
</div>

您不能在具有固定宽度 和高度 的容器中容纳任何内容。如果你想要它，你不应该使用固定的 width 和 height — 可以使用 min-width 或 min-height.

如果您希望内容仅在水平方向溢出容器，您可以这样做(http://jsfiddle.net/sergdenisov/5079bkdr/):

p {
    background-color:green;
    height:50px;
    max-height:50px;
    display: inline-block;
    white-space: nowrap;
}

这完全取决于您的具体问题。