हम CSS max-width प्रॉपर्टी का उपयोग करके किसी एलिमेंट के कंटेंट बॉक्स के लिए एक निश्चित अधिकतम चौड़ाई परिभाषित कर सकते हैं जो एलिमेंट के कंटेंट बॉक्स को उससे चौड़ा नहीं होने देती, भले ही चौड़ाई max-width से अधिक हो।
सिंटैक्स
CSS max-width प्रॉपर्टी का सिंटैक्स निम्नानुसार है:
Selector { max-width: /*value*/ }
आइए CSS max-width प्रॉपर्टी का एक उदाहरण देखते हैं:
उदाहरण
<!DOCTYPE html> <html> <head> <title>CSS max-width 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-width:200px; 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 maxWidth</button> </div> <script> function add() { document.querySelector('#contentDiv').style.maxWidth = "100%"; } </script> </body> </html>
आउटपुट
'Set maxWidth' बटन पर क्लिक करने से पहले:
'Set maxWidth' बटन पर क्लिक करने के बाद:
आइए CSS max-width प्रॉपर्टी का एक और उदाहरण देखते हैं:
दूसरा उदाहरण
<!DOCTYPE html> <html> <head> <title>CSS max-width 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; } #contentDiv1, #contentDiv2{ width:100%; border: 1px solid black; margin: 0 auto; } #contentDiv2{ width: 80%; } </style> <body> <div id="containerDiv"> <div id="contentDiv1"> This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. </div> <div id="contentDiv2"> This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy. </div> <button onclick="add()" class="btn">Set maxWidth</button> </div> <script> function add() { document.querySelector('#contentDiv1').style.maxWidth = "80%"; } </script></body></html>
आउटपुट
'Set maxWidth' बटन पर क्लिक करने से पहले:
'Set maxWidth' बटन पर क्लिक करने के बाद:
