CSS max-height用法及代码示例

CSS中的max-height属性用于设置元素的最大高度。如果元素的内容大于指定的maximum-height，则内容将溢出，否则无效。如果元素的内容较小，则无效。高度属性值可以由max-height属性覆盖。

用法:

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

属性值：

none:它是默认值，不包含max-height。它是没有最大高度规格的同义词。

用法:

max-height:none;

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>max-height property</title> 
          
        <style> 
            p { 
                max-height:none; 
                border:1px solid black; 
                overflow:auto; 
            } 
        </style> 
    </head> 
  
    <body> 
        <p> 
            Prepare for the Recruitment drive of 
            product based companies like Microsoft,  
            Amazon, Adobe etc with a free online  
            placement preparation course. The course 
            focuses on various MCQ's & Coding question 
            likely to be asked in the interviews & make 
            your upcoming placement season efficient 
            and successful. 
        </p> 
    </body> 
</html>

输出：
max-height

length:此属性用于定义max-height的长度。可以使用px，em等设置长度。

用法:

max-height:length;

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>max-height property</title> 
          
        <style> 
            p { 
                max-height:35px; 
                border:1px solid black; 
                overflow:auto; 
            } 
        </style> 
    </head> 
  
    <body> 
        <p> 
            Prepare for the Recruitment drive of 
            product based companies like Microsoft,  
            Amazon, Adobe etc with a free online  
            placement preparation course. The course 
            focuses on various MCQ's & Coding question 
            likely to be asked in the interviews & make 
            your upcoming placement season efficient 
            and successful. 
        </p> 
    </body> 
</html>

输出：
max-height

initial:此属性用于将max_height的值设置为其默认值。

用法:

max-height:initial;

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>max-height property</title> 
          
        <style> 
            p { 
                max-height:initial; 
                border:1px solid black; 
                overflow:auto; 
            } 
        </style> 
    </head> 
  
    <body> 
        <p> 
            Prepare for the Recruitment drive of 
            product based companies like Microsoft,  
            Amazon, Adobe etc with a free online  
            placement preparation course. The course 
            focuses on various MCQ's & Coding question 
            likely to be asked in the interviews & make 
            your upcoming placement season efficient 
            and successful. 
        </p> 
    </body> 
</html>

输出：
max-height

inherit:此属性是从其父级继承的。

支持的浏览器：下面列出了max-height属性支持的浏览器：

谷歌浏览器1.0
Internet Explorer 7.0
Firefox 1.0
Opera 7.0
Safari 2.0.2

相关用法

注：本文由纯净天空筛选整理自EnaMotwani大神的英文原创作品 CSS | max-height Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。