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



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


ওভারফ্লো প্রপার্টি

কোন কনটেন্ট যখন তার কন্টেন্ট বক্স থেকে উপচে পড়ে অর্থাৎ overflow হয়, তখন কনটেন্টকে ক্লিপ করার জন্য বা কোন স্ক্রলবার যুক্ত করার জন্য অথবা শুধু কন্টেন্টকে প্রদর্শন করানোর জন্য সিএসএস overflow প্রোপার্টি ব্যবহার করা হয়।
overflow প্রোপার্টিতে যেসকল মান নির্ধারণ করা যায় তা হল -

visible - এটি ডিফল্ট মান, এরকম overflow ক্লিপ হয় না এবং কন্টেন্ট বক্সের বাইরে প্লাবিত হয়।
hidden - এরকম overflow ক্লিপ হয় এবং কনটেন্টের বাকি অংশ অদৃশ্য হয়ে যায়।
scroll - এরকম overflow ক্লিপ হয় এবং স্ক্রলবার যুক্ত হয়, যা দ্বারা স্ক্রল করে কনটেন্টের বাকি অংশ দেখা যায়।
auto - এতে ব্রাউজার সয়ংক্রিয়ভাবে overflow ক্লিপ করে এবং স্ক্রলবার তৈরি করে।

নোট - শুধুমাত্র নির্দিষ্ট উচ্চতা বা height সম্বলিত কোন ব্লক এলিমেন্টের ক্ষেত্রেই overflow প্রোপার্টি কাজ করে।


overflow: visible

overflow প্রোপার্টির ডিফল্ট মান হলো visible বা দৃর্শমান। অর্থাৎ এই রকম overflow ক্লিপ হয় না এবং কন্টেন্ট বক্সের বাইরে প্লাবিত বা উপচে পরা অবস্থায় দৃশ্যমান থাকে।
নিচে এর উদাহর দেখুন।

ওয়েব পেজের লে-আউট নিয়ন্ত্রন করতে হলে সঠিক ভাবে overflow প্রোপার্টি ব্যবহার করতে হবে।




উদাহরণ দেখুন

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




overflow: hidden

overflow প্রপার্টির মান hidden নির্ধারণ করা হলে, overflow ক্লিপ করে কনটেন্টের বাকি অংশকে অদৃর্শ করে দেয়।
নিচে এর উদাহর দেখুন।

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



উদাহরণ দেখুন

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


এ রকম overflow কোনো স্ক্রলবার তৈরি করে না।


overflow: scroll

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

ক্লিপ হয় এবং সরবরাহ করে।

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


উদাহরণ

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


নোট - এ রকম overflow যদি প্রয়োজন নাও হয় তারপরও আনুভুমিক এবং উলম্ব ভাবে তৈরি হয়।


overflow: auto

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

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


উদাহরণ

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




overflow-x এবং overflow-y

overflow-X এবং overflow-Y প্রোপার্টি ব্যবহার করে কনটেন্টের overflow কে অনুভূমিক ও উলম্ব ভাবে অর্থাৎ ভিন্ন ভিন্ন ভাবে নিয়ন্ত্রন করা যায়।

overflow-X প্রপার্টি দ্বারা কনটেন্টের বা ও ডান প্রান্ত অর্থাৎ আনুভুমিক ভাবে overflow নিয়ন্ত্রন করা হয়।
overflow-Y প্রপার্টি দ্বারা কনটেন্টের উপর ও নীচ প্রান্ত অর্থাৎ উলম্ব ভাবে overflow নিয়ন্ত্রন করা হয়।

নিচে এর উদাহরণ দেখুন।

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


উদাহরণ

div{
overflow-x: hidden; /* আনুভুমিক স্ক্রলবার যুক্ত করতে দেয় না */
overflow-y: scroll; /* উলম্ব স্ক্রলবার যুক্ত করে */
}









এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.