Question

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

此处示例：http://jsfiddle.net/TgPRM/1382/

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

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

此处示例：http://jsfiddle.net/TgPRM/1377/

我的问题是，为什么宽度如此优先，我们可以做些什么让文字水平而不是垂直溢出？

编辑：我想保持溢出：可见，因此任何基于 overflow 属性的解决方案都无法解决我的问题。 白色空间：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的容器中插入任何内容。如果您需要，则不应使用固定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;
}

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

Answer 2

这样就够了吗？

http://jsfiddle.net/TgPRM/1385/

#wrapper{
    position:relative; 
    margin:0;
    padding:0;
}

#container{
height:100px;
max-height:100px;
width:50px;
background-color:red;
}

p {
    background-color:green;
    height:50px;
    max-height:50px;
    position:absolute;
    padding:5px;
}

<div id="wrapper">
    <div id="container"><p>hello this is a very long long long long paragraph</p></div></div>

Answer 3

这是因为你没有指定浏览器如何处理div元素的溢出，所以它可以由浏览器为你挑选。为了获得我认为你想要的东西，你需要这样的东西：

#container{
    height:50px;
    max-height:50px;
    width:50px;
    background-color:red;
    overflow-x: scroll;  /* Scrolls horizontally */
    overflow-y: hidden;  /* Doesn't scroll vertically */
    white-space: nowrap; /* Text doesn't automatically wrap due to width */
}

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

3 个答案: