CSS - 宽度 vs 高度 - 宽度优先。

Question

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

示例在这里：http://jsfiddle.net/TgPRM/1382/

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

现在更奇怪的是，即使我在段落内包裹文本并在该段落上设置固定高度/最大高度（但不包括宽度！），宽度仍然具有优先权。文本选择不尊重其父元素上设置的高度，而是尊重其祖父元素上设置的宽度。

示例在此：http://jsfiddle.net/TgPRM/1377/ 我的问题是，为什么给定的宽度如此重要，并且我们可以做些什么让文本在水平方向上溢出而不是垂直方向上溢出？

编辑：我想保持“overflow:visible”，因此基于“overflow”属性的任何解决方案都无法解决我的问题。“White-space:nowrap”似乎是一个极端的解决方案，因为它甚至不考虑浏览器窗口尺寸（尝试非常长的文本）。因此，我接受了Evan的解决方案，因为它已经完全按照我期望的方式在我的示例中工作了。

- smartly

---

请将此代码替换为 #container{ height:auto; max-height:auto;} - divy3993

你想要： （1）容器自动拉伸以适应文本 （2）隐藏超出容器的文本 （3）用户可以滚动以获取所有文本？ - kaz

你想让文本即使在固定宽度的情况下也水平溢出吗？ - Evan

你想让它水平溢出多宽？如果没有指定宽度，容器怎么知道应该有多宽？你想要所有的文本都在一行上吗？如果是这样，你可以使用 white-space: nowrap;。我不太确定你想要实现什么？ - Sean Stopnik

你可以通过添加 overflow: hidden 来证明 BoltClock 的说法。一旦区域被填满，文本就会被隐藏。 - Katana314

Answer 1

这不是优先级问题，而是简单的换行。如果你的单词很长，你可以检查它（http://jsfiddle.net/sergdenisov/y4wkmvcs/1/）：

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

您不能将任何内容放入具有固定宽度和高度的容器中。如果您想要这样做，您不应该使用固定的宽度和高度 - 可以考虑使用min-width或min-height。

如果您希望内容仅在水平方向上溢出容器，则可以按照以下方式操作（http://jsfiddle.net/sergdenisov/5079bkdr/）：

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

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

- sergdenisov

---

@smartly请查看我的更新答案。您不需要使用position: absolute，只需使用display: inline-block和white-space: nowrap即可。 - sergdenisov

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>

- Evan

---

是的，现在它的行为与我所期望的完全一致。也就是说：文本首先会水平溢出，只有当它到达站点的边缘时才会垂直溢出。但是为什么只有这种位置才能起作用呢？是因为position:absolute创建了一个新的块级格式化上下文吗？ - smartly

@smartly - 不是因为p元素的包含块，而是因为它的position:absolute属性使其最近的定位祖先是#wrapper div。如果您设置该div的宽度，您会发现p元素的宽度将受到限制。 - Alohci

@Alohci 哦，我明白了。另外，尝试将高度和宽度都放入包装器div中。现在我们有了与我的原始示例相同的奇特行为：文本仅在垂直方向上溢出，而不是水平方向上。 - smartly

@smartly请查看我的更新答案。您不需要使用position: absolute，只需使用display: inline-block和white-space: nowrap即可。 - sergdenisov

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 */
}

- charles