คุณสมบัติ max-height ใน CSS

เราสามารถกำหนด max-height คงที่สำหรับกล่องเนื้อหาขององค์ประกอบโดยใช้คุณสมบัติ max-height ใน CSS ซึ่งไม่ให้กล่องเนื้อหาขององค์ประกอบสูงกว่านั้น แม้ว่า height จะมากกว่า max-height ก็ตาม

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติ CSS max-height ดังนี้:

Selector {    max-height: /*value*/ }

ลองดูตัวอย่างสำหรับคุณสมบัติ CSS max-height:

ตัวอย่าง

<!DOCTYPE html> <html> <head> <title>CSS max-height Property</title> </head> <style> * {    padding: 2px;    margin:5px; } button {    border-radius: 10px; } #containerDiv { width:70%; margin: 0 auto;    padding:20px;    background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%);    text-align: center;    border-radius: 10px; } #contentDiv{    max-height:50px;    overflow: hidden; } </style> <body> <div id="containerDiv"> <div id="contentDiv"> This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. </div> <button onclick="add()" class="btn">Set maxHeight</button> </div> <script> function add() {    document.querySelector('#contentDiv').style.maxHeight = "100px"; } </script> </body> </html>

ผลลัพธ์

ก่อนคลิกปุ่ม 'Set maxHeight':

หลังคลิกปุ่ม 'Set maxHeight':

ลองดูอีกตัวอย่างสำหรับคุณสมบัติ CSS max-height:

ตัวอย่างเพิ่มเติม

<!DOCTYPE html> <html> <head> <title>CSS max-height</title> <style> form {    width:70%;    margin: 0 auto;    text-align: center; } * {    padding: 2px;    margin:5px; } #containerDiv {    margin: 0 auto;    max-height: 150px; } </style> </head> <body> <form> <fieldset> <legend>CSS max-height</legend> <div id="containerDiv"> <img id="image" src="https://www.tutorialspoint.com/openshift/images/openshift-mini-logo.jpg"> </div> </fieldset> </form> </body> </html>

ผลลัพธ์

ก่อนกำหนด max-height:

หลังกำหนด max-height: