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

সিএসএস overflow

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

overflow প্রোপার্টিতে নিম্নোক্ত ভ্যালুসমূহ ব্যবহৃত হয়।

overflow প্রোপার্টির কী-ওয়ার্ড ভ্যালুসমূহ

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

overflow প্রোপার্টির গ্লোবাল ভ্যালুসমূহঃ

• overflow: inherit;
• overflow: initial;
• overflow: unset;

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

ফরমাল সিনট্যাক্স

overflow: visible | hidden | scroll | auto;

kt_satt_skill_example_id=801

overflow: visible;

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

p { 
 overflow: visible;  /* কন্টেন্ট ক্লিপ হয় না  */ 
}

লে-আউট ভালো ভাবে নিয়ন্ত্রন করতে চাইলে আপনাকে overflow প্রোপার্টি ব্যবহার করতে হবে। একটি এলিমেন্ট এর ভেতরে কন্টেন্ট গুলো কিভাবে থাকবে overflow প্রোপার্টি দ্বারা তা নির্দেশ করা হয়।
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে

overflow: hidden;

overflow-কে ক্লিপ করে কনটেন্টের বাকি অংশকে অদৃর্শ করে দেয়।

p {
 overflow: hidden; /* কোনো স্ক্রলবার তৈরি হয় না। */
}

overflow: scroll;

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

p {
 overflow: scroll; /* সবসময়ই স্ক্রলবার তৈরি হয়। */ 
}

লে-আউট ভালো ভাবে নিয়ন্ত্রন করতে চাইলে আপনাকে overflow প্রোপার্টি ব্যবহার করতে হবে। একটি এলিমেন্ট এর ভেতরে কন্টেন্ট গুলো কিভাবে থাকবে overflow প্রোপার্টি দ্বারা তা নির্দেশ করা হয়।
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে

overflow: auto;

ব্রাউজার সয়ংক্রিয়ভাবে overflow ক্লিপ করে এবং স্ক্রলবার তৈরি করে।

p {
 overflow: auto; /* প্রয়োজন অনুযায়ী ব্রাউজার স্ক্রলবার তৈরি হয়। */
}

লে-আউট ভালো ভাবে নিয়ন্ত্রন করতে চাইলে আপনাকে overflow প্রোপার্টি ব্যবহার করতে হবে। একটি এলিমেন্ট এর ভেতরে কন্টেন্ট গুলো কিভাবে থাকবে overflow প্রোপার্টি দ্বারা তা নির্দেশ করা হয়।
overflow বুজার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুজার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুজার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুজার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে

সবগুলোর প্রোপার্টির ব্যবহারঃ

kt_satt_skill_example_id=805

overflow-X এবং overflow-Y

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

overflow-X দ্বারা কনটেন্টের বাম অথবা ডান প্রান্তে কি হবে তা নির্ধারণ করে।
overflow-Y দ্বারা কনটেন্টের উপর বা নিচ প্রান্তে কি হবে তা নির্ধারণ করে।

কন্টেন্টের লেআউট সঠিকভাবে নিয়ন্ত্রণ করতে চাইলে overflow প্রোপার্টিটি ব্যবহার করুন।

kt_satt_skill_example_id=806