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