CSS-এর overflow প্রপার্টি নিয়ন্ত্রণ করে, কনটেন্ট একটি এলাকায় ফিট হওয়ার জন্য খুব বড় হলে কী ঘটবে।
একটি এলিমেন্টের কনটেন্ট নির্দিষ্ট
এলাকায় ফিট হওয়ার জন্য খুব বড় হলে, কনটেন্ট ক্লিপ করতে হবে নাকি স্ক্রলবার যোগ করতে হবে তা overflow প্রপার্টি নির্ধারণ করে।
overflow প্রপার্টির নিচের মানগুলো আছে:
visible - ডিফল্ট। ওভারফ্লো ক্লিপ করা হয় না।
কনটেন্ট এলিমেন্টের বক্সের বাইরে রেন্ডার হয়hidden - ওভারফ্লো ক্লিপ করা হয়, এবং বাকি কনটেন্ট অদৃশ্য থাকবেscroll - ওভারফ্লো ক্লিপ করা হয়, এবং বাকি কনটেন্ট দেখার জন্য একটি স্ক্রলবার যোগ করা হয়auto - scroll-এর
মতোই, তবে এটি শুধু প্রয়োজনে স্ক্রলবার যোগ করেমনে রাখবেন: overflow প্রপার্টি শুধুমাত্র নির্দিষ্ট height থাকা ব্লক এলিমেন্টের জন্য কাজ করে।
মনে রাখবেন: OS X Lion-এ (Mac-এ), স্ক্রলবার ডিফল্টভাবে লুকানো থাকে এবং শুধু ব্যবহারের সময় দেখা যায় ("overflow:scroll" সেট করা থাকলেও)।
ডিফল্টভাবে, overflow হলো visible, অর্থাৎ এটি ক্লিপ করা হয় না এবং এটি
এলিমেন্টের বক্সের বাইরে রেন্ডার হয়:
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}hidden মান দিয়ে, ওভারফ্লো ক্লিপ করা হয়, এবং বাকি কনটেন্ট লুকানো থাকে:
div {
overflow: hidden;
}মান scroll-এ সেট করলে, ওভারফ্লো ক্লিপ করা হয় এবং বক্সের ভেতরে স্ক্রল করার জন্য একটি স্ক্রলবার যোগ করা হয়। মনে রাখবেন যে এটি অনুভূমিক এবং উল্লম্ব — দুই দিকেই স্ক্রলবার যোগ করবে (এমনকি আপনার প্রয়োজন না হলেও):
div {
overflow: scroll;
}auto মান scroll-এর মতোই, তবে এটি শুধু প্রয়োজনে স্ক্রলবার যোগ করে:
div {
overflow: auto;
}overflow-x এবং overflow-y প্রপার্টি নির্ধারণ করে কনটেন্টের ওভারফ্লো শুধু অনুভূমিকভাবে বা উল্লম্বভাবে (অথবা উভয়ভাবে) পরিবর্তন করা হবে কিনা:
overflow-x নির্ধারণ করে কনটেন্টের বাম/ডান এজের সাথে কী করা হবে।
overflow-y নির্ধারণ করে কনটেন্টের উপরের/নিচের এজের সাথে কী করা হবে।
div {
overflow-x: hidden; /* অনুভূমিক স্ক্রলবার লুকান */
overflow-y: scroll; /* উল্লম্ব স্ক্রলবার যোগ করুন */
}| প্রপার্টি | বিবরণ |
|---|---|
| overflow | কনটেন্ট একটি এলিমেন্টের বক্স থেকে ওভারফ্লো হলে কী ঘটবে তা নির্ধারণ করে |
| overflow-x | কনটেন্ট এলিমেন্টের কনটেন্ট এরিয়া থেকে ওভারফ্লো হলে বাম/ডান এজের সাথে কী করতে হবে তা নির্ধারণ করে |
| overflow-y | কনটেন্ট এলিমেন্টের কনটেন্ট এরিয়া থেকে ওভারফ্লো হলে উপরের/নিচের এজের সাথে কী করতে হবে তা নির্ধারণ করে |