Skip to main content

CSS最大高度属性

它设置元素内容框的最大高度。这意味着内容框的高度可以小于“最大高度”值,但不能大于该值。它设置元素高度的上限。

当内容大于最大高度时,它将溢出。如果内容小于最大高度,则此属性不影响。此属性确保“高度”属性的值不能大于“最大高度”属性的值。它不允许负值。

有时,将元素的高度限制在一定范围内是有用的。

语法

max-height: none | length | initial | inherit;

此CSS属性的值定义如下。

translate failed

无:默认值不限制内容框的大小。

长度:该值定义了最大高度,单位为px、cm、pt等。

初始值:将属性设置为其默认值。

继承:它从其父元素继承属性。

现在,让我们来看一个CSS属性的例子。

实例

在这个例子中,有四个段落元素的内容。我们使用“最大高度”属性的“长度”值来定义这些段落的最大高度。第一段的最大高度为60px,第二段为6em,第三段为130pt,第四段为5cm。

第一段的内容大于“最大高度”属性的值,因此在输出中,我们可以看到第一段的内容溢出了内容框。

<!DOCTYPE html>
<html>
<head>
<title>
max-height property
</title>

<style>
p{
border: 4px solid blue;
background-color: lightblue;
font-size: 20px;
}
#px {
max-height: 60px;
}
#em {
max-height: 6em;

}
#pt {
max-height: 130pt;

}
#cm {
max-height: 5cm;

}
</style>
</head>
<body>
<h2> max-height: 60px; </h2>
<p id = "px">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<br>
<h2> max-height: 6em; </h2>
<p id = "em">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<h2> max-height: 130pt; </h2>
<p id = "pt">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<h2> max-height: 5cm; </h2>
<p id = "cm">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>

</body>
</html>

输出

translate failed

CSS最大高度属性