हम किसी एलिमेंट के ओवरफ्लोइंग कंटेंट को मैनेज/हैंडल करने के लिए CSS overflow प्रॉपर्टी का उपयोग कर सकते हैं। यह प्रॉपर्टी यूजर को कंटेंट क्लिप करने, क्लिप्ड कंटेंट देखने के लिए स्क्रॉलबार प्रदान करने, कंटेंट को कंटेनर के बाहर रेंडर करने की अनुमति देती है, इसीलिए इसका नाम overflow है।
सिंटैक्स
CSS Overflow प्रॉपर्टी के लिए सिंटैक्स निम्नानुसार है:
Selector { overflow: /*value*/ }
आइए CSS overflow प्रॉपर्टी का एक उदाहरण देखते हैं:
उदाहरण
<!DOCTYPE html> <html> <head> <title>CSS Overflow</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } #containerDiv { margin: 0 auto; height: 110px; overflow: scroll; } </style></head> <body> <form> <fieldset> <legend>CSS Overflow</legend> <div id="containerDiv"> 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. 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. 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> <input type="button" onclick="add()" value="Remove Scrollbars"> </fieldset> </form> <script> function add() { document.querySelector('#containerDiv').style.overflow = "hidden"; } </script> </body> </html>
आउटपुट
'Remove Scrollbars' बटन पर क्लिक करने से पहले:
'Remove Scrollbars' बटन पर क्लिक करने के बाद:
आइए CSS overflow प्रॉपर्टी का एक और उदाहरण देखते हैं:
दूसरा उदाहरण
<!DOCTYPE html> <html> <head> <title>CSS Overflow</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } #containerDiv { margin: 0 auto; height: 100px; width: 100px; overflow: auto; } </style> </head> <body> <form> <fieldset> <legend>CSS Overflow</legend> <div id="containerDiv"> <img id="image" src="https://www.tutorialspoint.com/sas/images/sas-mini-logo.jpg"> </div> <input type="button" onclick="fitHeight()" value="Remove Scrollbars"> </fieldset> </form> <script> var divDisplay = document.getElementById("divDisplay"); var imgSelect = document.getElementById("image"); var containerDiv = document.getElementById("containerDiv"); function fitHeight() { containerDiv.style.height = imgSelect.height+'px'; containerDiv.style.width = imgSelect.width+'px'; containerDiv.style.overflow = 'hidden'; } </script> </body> </html>
आउटपुट
किसी बटन पर क्लिक करने से पहले:
'Remove Scrollbars' बटन पर क्लिक करने के बाद:
