CSS Overflow প্রপার্টি নিয়ে কাজ

CSS overflow প্রপার্টি কাজে আসে যখন ব্যবহারকারী একটি বড় কন্টেন্টকে ছোট কন্টেইনারে রিসাইজ না করে দেখাতে চায়। এই প্রপার্টি ব্যবহারকারীকে কন্টেন্ট ক্লিপ করতে, ক্লিপ করা কন্টেন্ট দেখতে স্ক্রলবার প্রদান করতে, বা কন্টেন্টকে কন্টেইনারের বাইরে রেন্ডার করতে দেয়—এটাই বলে overflow।

সিনট্যাক্স

CSS Overflow প্রপার্টির সিনট্যাক্স নিম্নরূপ:

Selector {    overflow: /*মান*/ }

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' বাটনে ক্লিক করার পর: