সিএসএস overflow প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| overflow | ১.০ | ৪.০ | ১.০ | ১.০ | ৭.০ |
সংজ্ঞা ও ব্যবহার
যদি একটি এলিমেন্ট বক্স-এর কন্টেন্ট ওভারফ্লো করে তাহলে কি ঘটবে তা ওভারফ্লো প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়।
যখন একটি নির্দিষ্ট এরিয়ার মধ্যে এলিমেন্টের কন্টেন্ট তুলনামূলক বড় হয় তখন কন্টেন্ট ক্লিপ করবে নাকি স্ক্রলবার যুক্ত করবে ওভারফ্লো প্রোপার্টি তা নির্দিষ্ট করে।
পরামর্শঃ
- ব্লক এলিমেন্টের সাথে একটি নির্দিষ্ট উচ্চতার জন্য ওভারফ্লো প্রোপার্টি নির্ধারণ করা হয়।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| visible | না | না। আরোও জানতে animatable অধ্যায় ভিজিট করুন। |
সিএসএস সিনট্যাক্স
overflow: visible/hidden/scroll/auto/initial/inherit;
স্ক্রল করার জন্য ওভারফ্লো প্রোপার্টি নির্ধারণঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
div.scroll {
background-color: coral;
width: 130px;
height: 100px;
overflow: scroll;
}
div.hidden {
background-color: teal;
width: 120px;
height: 100px;
overflow: hidden;
}
</style>
</head>
<body>
<p> overflow প্রোপার্টিটি কন্টেন্ট বক্সের ভিতরের কন্টেন্টগুলোর সীমা নির্ধারন করে দেয়।</p>
<p>overflow:scroll</p>
<div class="scroll"> লে আউটে নিয়ন্ত্রন রাখার জন্য আপনি overflow প্রোপার্টিটি ব্যবহার করা হয়।</div>
<p>overflow:hidden</p>
<div class="hidden"> লে আউটে নিয়ন্ত্রন রাখার জন্য আপনি overflow প্রোপার্টিটি ব্যবহার করা হয়।</div>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.overflow="scroll"উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
border: 2px solid teal;
background-color: coral;
width: 250px;
height: 180px;
overflow: visible;
}
</style>
</head>
<body>
<p>"উদাহরণ দেখি" বাটনে ক্লিক করলে div এলিমেন্টের overflow প্রোপার্টিটি পরিবর্তিত হবে।</p>
<button onclick="myFunction()">উদাহরণ দেখি</button>
<div id="myDIV">
যদি একটি এলিমেন্ট বক্স-এর কন্টেন্ট ওভারফ্লো করে তাহলে কি ঘটবে তা ওভারফ্লো প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়। যখন একটি নির্দিষ্ট এরিয়ার মধ্যে এলিমেন্টের কন্টেন্ট তুলনামূলক বড় হয় তখন কন্টেন্ট ক্লিপ করবে নাকি স্ক্রলবার যুক্ত করবে ওভারফ্লো প্রোপার্টি তা নির্দিষ্ট করে। ব্লক এলিমেন্টের সাথে একটি নির্দিষ্ট উচ্চতার জন্য ওভারফ্লো প্রোপার্টি নির্ধারণ করা হয়।
</div>
<script>
function myFunction() {
document.getElementById("myDIV").style.overflow = "scroll";
}
</script>
</body>
</html>
ফলাফল
overflow প্রোপার্টির ভ্যালু-সমূহ
- visible - ওভারফ্লো ক্লিপ হবে না। এটা এলিমেন্ট বক্স-এর বাহিরে রেন্ডার করে। এটা ডিফল্ট।
- hidden - ওভারফ্লো ক্লিপ হবে এবং বাকি কন্টেন্ট অদৃশ্য হবে।
- scroll - ওভারফ্লো ক্লিপ হবে কিন্তু বাকি কন্টেন্ট দেখার জন্য স্ক্রলবার যুক্ত হবে।
- auto - যদি ওভারফ্লো ক্লিপ হয় তাহলে বাকি কন্টেন্ট দেখার জন্য একটি স্ক্রল-বার যুক্ত হয়।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
overflow প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।