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