সিএসএস ওভারফ্লো - CSS Overflow


সকল আকারের বা size এর ডিসপ্লেতে বিশেষ করে মোবাইলের মত ছোট size এর স্ক্রীন এ ওয়েব পেজের কন্টেন্টগুলো ঠিক ভাবে এবং সম্পূর্ণ রুপে প্রকাশ করার জন্য কন্টেন্টগুলোর প্রদর্শন ভঙ্গি বাঁ নিয়মনীতি নির্ধারণ করে দেয়া বিশেষ প্রয়োজন।

সিএসএস এর overflow প্রোপার্টি ব্যবহার করে ওয়েব পেজকে বিভিন্ন আকারের স্ক্রীন সাইজে কিভাবে প্রদর্শিত হবে তা নির্ধারণ করে দেয়া যায়।


overflow প্রোপার্টি

কোন ওয়েব কন্টেন্ট যেমন - কোন লেখা বা text, কোন ছবি বা image ইত্যাদির আকার বা size, তার ধারক এলিমেন্ট এর আকার অর্থাৎ parent এলিমেন্ট এর থেকে বেশি হয়, তখন সেই এলিমেন্ট অর্থাৎ কন্টেন্টটি কিভাবে প্রদর্শিত হবে তা নির্ধারণ করা হয় সিএসএস এর overflow প্রোপার্টি ব্যবহার করে। এক কথায় বলতে হয় কোন কন্টেন্ট এর উপচে পরা বা overflow কি রকম ভাবে হবে অর্থাৎ কোন scrool bar যুক্ত হবে কি না বা কন্টেন্ট এর কোন অংশ কিভাবে clip করে প্রদর্শিত ঘবে, তা নির্ধারণ করা হয় এই প্রোপার্টি ব্যবহার করে।

websschool.com is a free bangla website for learning web design & development, seo etc. In our website you will find HTML, CSS, Javascript, Jquerry, SEO tutorials in bangla. You will find some web template also which is 100% free for your test and usage. For learn this vesit our website at https://www.websschoool.com/
ENJOY websSchool.com

overflow প্রোপার্টিতে জেসকল মান ব্যবহার করা যায়, সেগুলো হল - auto, visible, hidden, scroll, overflow-x এবং overflow-y. নিচে পর্যায়ক্রমে এই প্রোপার্টি গুলো সম্পর্কে বিস্তারিত আলোচনা করা হয়েছে।

overflow প্রোপার্টি কোন নির্ধারিত উচ্চতা বা height সহ কেবল মাত্র ব্লক এলিমেন্ট গুলোতে কাজ করে। এইচটিএমএল এর ব্লক এলিমেন্ট গুলো সম্পর্কে জানতে আমাদের এইচটিএমএল ব্লক এলিমেন্ট টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।


overflow: visible

overflow প্রোপার্টির মান visible নির্ধারণ করা হলে, কন্টেন্ট গুলো কন্টেন্ট বক্সের বাইরে প্লাবিত বা উপচে পরা অবস্থায় দৃশ্যমান হয়। এই মানের জন্য কন্টেন্ট এর কোন অংশ কর্তন বা clip হয় না। visible মান হল overflowপ্রোপার্টির পূর্ব-নির্ধারিত বা defaulf মান।

এইচটিএমএল কন্টেন্টের সম্পূর্ণ অংশই প্রদর্শিত হচ্ছে। এখানে কোনো স্ক্রলবার তৈরি হয় নি।


নিচে overflow প্রোপার্টি বাবহা করে একটি উদাহরন দেখুন।

উদাহরণ

div {
   width: 200px;
   height: 50px;
   background-color: salteblue;
   overflow: visible;
   }

কোড এডিটর



overflow: hidden

ওয়েব পেজে কোন কন্টেন্ট এর জন্য overflow প্রোপার্টি এর মান, hidden নির্ধারণ করা হলে, ক্লিপ করে কন্টেন্ট যেমন কোন লেখা বা text, কোন ছবি বা image ইত্যাদির বাকি অংশকে অদৃর্শ করে দেয়।

এইচটিএমএল কনটেন্টের বাকি অংশকে অদৃর্শ হয়ে গেছে। এখানে কোনো স্ক্রলবার তৈরি হয় নি।

নিচে overflow: hidden ব্যবহার করে একটি উদাহরন দেখুন।

উদাহরণ

div {
   width: 200px;
   height: 50px;
   background-color: salteblue;
   overflow: hidden;
   }

কোড এডিটর



overflow: scroll

যদি overflow প্রপার্টির মান scroll নির্ধারণ করা হয়, তবে কন্টেন্ট গুলো ক্লিপ হয় এবং ডান ও নিচ দিকে একটি করে স্ক্রলবার তৈরি হয়ে কনটেন্টের বাকি অংশকে স্ক্রলবারে অদৃশ্য করে দেয়।

এখানে overflow ক্লিপ হয়েচে এবং স্ক্রলবার তৈরি হয়ে কনটেন্টের বাকি অংশকে স্ক্রলবারে অদৃশ্য করে দিয়েছে।

overflow প্রোপার্টির মান scroll নির্ধারণ করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

div {
   width: 200px;
   height: 60px;
   background-color: salteblue;
   overflow: scroll;
   }

কোড এডিটর



overflow: auto

overflow প্রপার্টির মান auto নির্ধারণ করা হলে, শুধুমাত্র প্রয়োজনীয় ক্ষেত্রেই কন্টেন্ট গুলো ক্লিপ হয় এবং স্ক্রলবার তৈরি হয়ে কন্টেন্টের বাকি অংশকে স্ক্রলবারের মাঝে অদৃশ্য করে দেয়।

এখানে সুঘুমাত্র উলম্ব ভাবে স্ক্রলবার প্রয়োজন হয়েছে বলেই একটি উলম্ব স্ক্রলবার তৈরি হয়েছে, width বা প্রস্থ নির্ধারিত আছে বলে কোন আনুভুমিক স্ক্রলবার তৈরি হয় নি।

overflow প্রপার্টির মান auto ব্যবহার করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

div {
   width: 200px;
   height: 60px;
   background-color: salteblue;
   overflow: auto;
   }

কোড এডিটর



overflow-x ও overflow-y

overflow প্রোপার্টির মান overflow-X এবং overflow-Y ব্যবহার করে যথাক্রমে এইচটিএমএল কন্টেন্ট এর overflow কে ভিন্ন ভিন্ন ভাবে নিয়ন্ত্রন করা যায়। এই মান গুলোর জন্য নিচের মত ফলাফল পাওয়া যায়।

এখানে সুঘুমাত্র উলম্ব ভাবে স্ক্রলবার প্রয়োজন হয়েছে বলেই একটি উলম্ব স্ক্রলবার তৈরি হয়েছে, width বা প্রস্থ নির্ধারিত আছে বলে কোন আনুভুমিক স্ক্রলবার তৈরি হয় নি।

overflow প্রোপার্টির মান overflow-X এবং overflow-Y নির্ধারণ করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

.exe-xy{
   width: 200px;
   height: 62px;
   overflow-x: hidden; 
   overflow-y: scroll;
   background-color: salteblue;
   }

কোড এডিটর



সকল overflow প্রোপার্টি

প্রোপার্টিমানবর্ণনা
overflow