আমরা একটি এলিমেন্টের ওভারফ্লোইং কন্টেন্ট ম্যানেজ/হ্যান্ডেল করতে CSS overflow প্রপার্টি ব্যবহার করতে পারি। এই প্রপার্টি ব্যবহারকারীকে কন্টেন্ট ক্লিপ করতে, ক্লিপ করা কন্টেন্ট দেখতে স্ক্রলবার প্রদান করতে, কন্টেন্টকে কন্টেইনারের বাইরে রেন্ডার করতে দেয়—এটাই বলে overflow।
সিনট্যাক্স
CSS Overflow প্রপার্টির সিনট্যাক্স নিম্নরূপ:
Selector { 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: 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' বাটনে ক্লিক করার পর:
