CSS Overflow प्रॉपर्टी के साथ काम करना

CSS overflow प्रॉपर्टी तब काम आती है जब यूजर कंटेंट को रिसाइज़ किए बिना एक छोटे कंटेनर में बड़ा कंटेंट प्रदर्शित करना चाहता है। यह प्रॉपर्टी यूजर को कंटेंट क्लिप करने, क्लिप्ड कंटेंट देखने के लिए स्क्रॉलबार प्रदान करने, कंटेंट को कंटेनर के बाहर रेंडर करने की अनुमति देती है, इसीलिए इसका नाम overflow है।

सिंटैक्स

CSS Overflow प्रॉपर्टी के लिए सिंटैक्स निम्नानुसार है:

Selector {    overflow: /*value*/ }

CSS Overflow प्रॉपर्टी के लिए निम्नलिखित मान हैं:

आइए 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/hadoop/images/hadoop-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' बटन पर क्लिक करने के बाद:

आइए 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' बटन पर क्लिक करने के बाद: