Question

我目前遇到内容溢出我的html标头的问题。我尝试使用css-property溢出，但是将其设置为hidden或auto不是我想要达到的目的。我不想隐藏溢出的内容，我希望内容的高度适合标题的固定高度。

有人可以帮忙吗？

以下是存在问题的示例代码：

body
{
  padding: 5%;
}
h1
{
  color: rgb(0, 32, 96);
  padding-bottom: 10px;
  border-bottom: 5px solid gray;
}
h3
{
  color: rgb(0, 32, 96);
}
.Header
{
  height: 120px;
  border-bottom: 3px solid gray;
}

<div class=Header>
        <h1>Header Sample Text</h1>
        <h3>Sub-Header Sample Text</h3>
        <p>Some Properties I have to display which are overflowing.</p>
</div>

Answer 1

您可以将margin属性应用于

h1,h3,p{
margin:5px 0px;}

设置为固定高度的内容

body
{
  padding: 5%;
}
h1
{
  color: rgb(0, 32, 96);
  padding-bottom: 10px;
  border-bottom: 5px solid gray;
}
h3
{
  color: rgb(0, 32, 96);
}
.Header
{
  height: 120px;
  border-bottom: 3px solid gray;
}

h1,h3,p{
margin:5px 0px;}

<div class=Header>
        <h1>Header Sample Text</h1>
        <h3>Sub-Header Sample Text</h3>
        <p>Some Properties I have to display which are overflowing.</p>
</div>

Answer 2

如果您将标题设置为固定高度，并且元素不适合其中，则通常它们与底部边框重叠。您需要将height更改为min-height，或者将这些元素放置在固定高度div之外：

最小高度：

body
{
  padding: 5%;
}
h1
{
  color: rgb(0, 32, 96);
  padding-bottom: 10px;
  border-bottom: 5px solid gray;
}
h3
{
  color: rgb(0, 32, 96);
}
.Header
{
  min-height: 120px;
  border-bottom: 3px solid gray;
}

<div class=Header>
        <h1>Header Sample Text</h1>
        <h3>Sub-Header Sample Text</h3>
        <p>Some Properties I have to display which are overflowing.</p>
</div>

或在div之外：

body
{
  padding: 5%;
}
h1
{
  color: rgb(0, 32, 96);
  padding-bottom: 10px;
  border-bottom: 5px solid gray;
}
h3
{
  color: rgb(0, 32, 96);
}
.Header
{
  min-height: 120px;
  border-bottom: 3px solid gray;
}

<div class=Header>
        <h1>Header Sample Text</h1>
        <h3>Sub-Header Sample Text</h3>
</div>
<p>Some Properties I have to display which are overflowing.</p>

内容溢出：标题div的自动高度变高

2 个答案: