আমরা একটি উপাদানের উপচে পড়া বিষয়বস্তু পরিচালনা/হ্যান্ডেল করতে CSS ওভারফ্লো প্রপার্টি ব্যবহার করতে পারি। এই প্রপার্টি ব্যবহারকারীকে কন্টেন্ট ক্লিপ করতে, ক্লিপ করা কন্টেন্ট দেখতে স্ক্রলবার প্রদান করতে, কন্টেইনারের বাইরে কন্টেন্ট রেন্ডার করতে দেয় এইভাবে নাম ওভারফ্লো হয়।
সিনট্যাক্স
CSS ওভারফ্লো প্রপার্টি -
-এর জন্য সিনট্যাক্স নিচে দেওয়া হলSelector {
overflow: /*value*/
} আসুন CSS ওভারফ্লো প্রপার্টি -
এর একটি উদাহরণ দেখিউদাহরণ
<!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> আউটপুট
'স্ক্রলবারগুলি সরান' ক্লিক করার আগে৷ বোতাম -
'স্ক্রলবারগুলি সরান' ক্লিক করার পরে৷ বোতাম -
CSS ওভারফ্লো প্রপার্টি -
-এর জন্য আরেকটি উদাহরণ দেখা যাকউদাহরণ
<!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> আউটপুট
যেকোনো বোতামে ক্লিক করার আগে −
'স্ক্রোলবার সরান' বোতামে ক্লিক করার পর -
