CSS में min-width प्रॉपर्टी

हम CSS min-width प्रॉपर्टी का उपयोग करके किसी एलिमेंट के कंटेंट बॉक्स के लिए एक फिक्स्ड मिनिमम चौड़ाई परिभाषित कर सकते हैं, जो एलिमेंट के कंटेंट बॉक्स को संकरा नहीं होने देता, भले ही चौड़ाई min-width से कम हो।

सिंटैक्स

CSS min-width प्रॉपर्टी का सिंटैक्स निम्नलिखित है:

Selector { min-width: /*value*/ }

उदाहरण

आइए CSS min-width प्रॉपर्टी के लिए एक उदाहरण देखते हैं:

<!DOCTYPE html> <html> <head> <title>CSS min-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{ min-width:200px; border: 1px solid black; } </style> <body> <div id="containerDiv"> <div class="contentDiv"> This is paragraph 1 with some dummy text. </div> <div class="contentDiv"> This is paragraph 2 with some dummy text. </div> <div class="contentDiv"> This is paragraph 2 with some dummy text. </div> <button onclick="add()" class="btn">Set minWidth</button> </div> <script> function add() { document.querySelectorAll('.contentDiv')[1].style.minWidth = "100%"; } </script> </body> </html>

आउटपुट

उपरोक्त कोड के लिए आउटपुट निम्नलिखित है:

'Set minWidth' बटन पर क्लिक करने से पहले -

'Set minWidth' बटन पर क्लिक करने के बाद -

उदाहरण

आइए CSS min-width प्रॉपर्टी का एक और उदाहरण देखते हैं:

<!DOCTYPE html> <html> <head> <title>CSS min-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(62deg, #fbab7e 0%, #f7ce68 100%); text-align: center; border-radius: 10px; } .contentDiv{ min-width:200px; border: 1px solid black; } </style> <body> <div id="containerDiv"> <div class="contentDiv"> This is paragraph 1 with some dummy text. </div> <div class="contentDiv"> Lorem Text </div> <div class="contentDiv"> This is paragraph 3 with some dummy text. </div> <button onclick="add()" class="btn">Set minWidth</button> </div> <script> function add() { var all = document.querySelectorAll('.contentDiv'); for(var i=0; i<all.length; i++) all[i].style.minWidth = "100%"; } </script> </body> </html>

आउटपुट

उपरोक्त कोड के लिए आउटपुट निम्नलिखित है:

'Set minWidth' बटन पर क्लिक करने से पहले -

'Set minWidth' बटन पर क्लिक करने के बाद -