我目前遇到内容溢出我的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>
答案 0 :(得分: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>
答案 1 :(得分:0)
如果您将标题设置为固定高度,并且元素不适合其中,则通常它们与底部边框重叠。您需要将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>