CSS max-height
CSS max-height
它设置元素内容框的最大高度。这意味着内容框的高度可以小于最大高度值，但不能大于最大高度值，设置元素高度的上限。
当内容大于最大高度时它将溢出。如果内容小于
max-height，则此属性不受影响。此属性可确保height属性的值不能大于
max-height 属性的值。它不允许负值。
max-height，则此属性不受影响。此属性可确保height属性的值不能大于
max-height 属性的值。它不允许负值。
有时将元素的高度限制在一定范围内非常有用。
语法
max-height: none | length | initial | inherit;
此
CSS属性的值定义如下。
CSS属性的值定义如下。
none：这是默认值，不限制内容框的大小。
length：此值以px，cm，pt定义最大高度。等等。
initial：将属性设置为其默认值。
inherit：父元素。
现在，让我们看一下此CSS属性的示例。
示例
在此示例中，有四个段落元素与内容。我们使用
max-height 属性的长度值定义这些段落的最大高度。第一段的最大高度为
60px ，第二段为
6em ，第三段为
130pt ，第四段为
5cm 。
max-height 属性的长度值定义这些段落的最大高度。第一段的最大高度为
60px ，第二段为
6em ，第三段为
130pt ，第四段为
5cm 。
第一段的内容大于
max-height 属性的值，因此在输出中，我们可以看到第一段溢出内容框。
max-height 属性的值，因此在输出中，我们可以看到第一段溢出内容框。
<!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 bianchenghao6.com. This site is developed so that students may learn computer science related technologies easily. The bianchenghao6.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 bianchenghao6.com. This site is developed so that students may learn computer science related technologies easily. The bianchenghao6.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 bianchenghao6.com. This site is developed so that students may learn computer science related technologies easily. The bianchenghao6.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 bianchenghao6.com. This site is developed so that students may learn computer science related technologies easily. The bianchenghao6.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>
输出
