具有最大/最小宽度/高度的简单 CSS 框模型问题

Question

我正在测试网页上玩盒子模型。一切都正常工作，除了我调整浏览器大小。

如果调整浏览器大小以覆盖大约一半的标题，我正在尝试将标题切成两半并显示在标题的第一部分下方。然而，这被证明是一个问题。

这是我针对此特定问题的代码：

#header1 {
    color: darkorange;
    width: 500px;
    height: 30px;
    min-width: 300px;
    min-height: 30px;
    max-width: 500px;
    max-height: 70px; 
}

目前，当我调整浏览器大小时，标题的一部分消失在浏览器边缘后面。

我

猜我误解了最大/最小高度/宽度的工作。

我需要在此处使用溢出命令吗？

<h1 id="header1">
    Welcome to Luc's Amazing Website!
</h1>
<br />

告诉我您是否需要更多的代码，我不知道到底需要多少。

Answer 1

如果不看到更多的代码，很难说，尽管以下内容应该足以实现您正在寻找的结果。

#header1 {
    color: darkorange;
    min-height: 30px;
    max-width: 500px;
    max-height: 70px;
}

请参阅小提琴中的示例，https://jsfiddle.net/sh0fevt1/2/

Answer 2

为此，

您需要将两个部分放在单独的框中。此外，width: 500px;也不足以将整个标题放在一行中。

#header1 {
    color: darkorange;
}
#header1 span {
    display: inline-block;
}

<h1 id="header1">
    <span>Welcome to Luc's</span> <span>Amazing Website!</span>
</h1>
<br />