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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。