ওভারফ্লোইং (overflowing) কন্টেন্ট হ্যান্ডল করা ভালো ওয়েব ডিজাইনের একটি গুরুত্বপূর্ণ বৈশিষ্ট্য।
যখন আপনি একটি ওয়েব পেজে একটি এলিমেন্ট ডিজাইন করছেন, তখন এমন একটি পরিস্থিতি হতে পারে যেখানে এলিমেন্টের কন্টেন্ট তার বর্ডারের মধ্যে ফিট (fit) করতে পারে না। এটি আপনার ওয়েব পেজকে অপ্রত্যাশিতভাবে রেন্ডার করতে পারে। এখানেই CSS overflow প্রোপার্টি কাজে আসে।
overflow প্রোপার্টি ব্যবহার করা হয় এমন পরিস্থিতি হ্যান্ডল করতে যেখানে একটি এলিমেন্টের কন্টেন্ট তার বর্ডারের মধ্যে ফিট করতে পারে না। উদাহরণের রেফারেন্স নিয়ে, এই টিউটোরিয়ালে CSS overflow প্রোপার্টি আপনার কোডে কীভাবে ব্যবহার করতে হয় তা ব্যাখ্যা করা হয়েছে।
CSS Overflow
overflow প্রোপার্টি আপনাকে নির্দিষ্ট করতে দেয় কী হবে যখন একটি কন্টেন্টের টুকরো সেই এলিমেন্টে অ্যাসাইন করা স্পেসে ফিট होने বড়।
উদাহরণস্বরূপ, ধরে নিন আপনি একটি <div> ট্যাগ সংজ্ঞায়িত করেছেন যাতে একটি প্যারাগ্রাফ টেক্সট প্রদর্শিত হবে। এই <div> ট্যাগটি শুধু 250px উচ্চতা এবং 500px প্রস্থের, এবং প্যারাগ্রাফের জন্য নির্দিষ্ট স্পেসে ফিট হতে túl বেশি টেক্সট রয়েছে।
আপনি এই সমস্যা হ্যান্ডল করতে এবং নিশ্চিত করতে পারেন যে আপনার কন্টেন্ট ব্যবহারকারীর স্ক্রিনে সঠিকভাবে ظاهر হচ্ছে overflow প্রোপার্টি ব্যবহার করে। একটি overflow প্রোপার্টি নির্দিষ্ট করে, আপনি একটি ওয়েব এলিমেন্টে কন্টেন্ট ভুলভাবে ظاهر হওয়ার সম্ভাবনা কমাতে পারেন।
overflow প্রোপার্টির চারটি সম্ভাব্য মান রয়েছে। এগুলো হলো:
- visible. একটি এলিমেন্টের ওভারফ্লো ক্লিপ (clip) করা হয় না, এবং কন্টেন্ট এলিমেন্টের বক্সের বাইরে রেন্ডার হয়। এটি
overflowপ্রোপার্টির ডিফল্ট মান। - scroll. একটি এলিমেন্টের ওভারফ্লো ক্লিপ করা হয়, এবং বাকি কন্টেন্ট দেখতে একটি স্ক্রোলবার (scrollbar) তৈরি করা হয়।
- hidden. একটি এলিমেন্টের ওভারফ্লো ক্লিপ করা হয়, এবং বাকি কন্টেন্ট ব্যবহারকারীর কাছ থেকে লুকানো থাকে।
- auto. Auto শুধু যখন প্রয়োজন হয় তখন বাকি কন্টেন্ট দেখতে স্ক্রোলবার যোগ করে।
overflow প্রোপার্টি শুধু ব্লক-লেভেল (block-level) এলিমেন্টগুলিতে প্রযোজ্য করা যেতে পারে যাদের একটি নির্দিষ্ট উচ্চতা height অ্যাট্রিবিউট ব্যবহার করে অ্যাসাইন করা আছে।
CSS Overflow উদাহরণ (CSS Overflow Examples)
চলুন overflow প্রোপার্টির সাথে ব্যবহার করা যেতে পারে প্রতিটি সম্ভাব্য মানের একটি উদাহরণ দেখি। আমরা overflow: visible প্রোপার্টি দিয়ে শুরু করব।
Visible Overflow
visible মান একটি ওয়েব এলিমেন্টের জন্য ডিফল্ট ওভারফ্লো সেট। visible মান 가진 এলিমেন্টগুলো ক্লিপ করা হয় না এবং তাদের কন্টেন্ট এলিমেন্টের বক্সের বাইরে ظاهر হয়।
মান লইজिए আমরা কিছু লাইন টেক্সটসহ একটি বক্স ডিজাইন করছি। আমরা যদি নির্দিষ্ট করি যে টেক্সটটি বক্সের জন্য বড় হলে, আমরা চাই এটি বক্সের বাইরে রেন্ডার হবে। আমরা নিচের কোড ব্যবহার করে এই কাজটি সম্পন্ন করতে পারি:
index.html
<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS overflow property and assign it the value "visible".</div>
styles.css
div { width: 200px; height: 100px; background-color: lightgray; overflow: visible; }আমাদের কোডের আউটপুট:
[Code result here]
আমাদের কোড ব্রেক ডাউন করা যাক। আমাদের কোডে, আমরা একটি বক্স তৈরি করেছি যা 200px প্রস্থের এবং 100px উচ্চতার। আমাদের বক্সের একটি হালকা স্লেটি (light gray) ব্যাকগ্রাউন্ড রঙ রয়েছে। এই স্টাইলগুলো আপনার কোডের <div> ট্যাগে প্রযোজ্য।
অতিরিক্তভাবে, আমরা overflow: visible প্রোপার্টি ব্যবহার করেছি আমাদের কোডকে নির্দেশ দিতে যে, যদি আমাদের <div> ট্যাগে টেক্সট এলিমেন্টে ফিট না করতে পারে, তবে টেক্সটটি এলিমেন্টের বক্সের বাইরে রেন্ডার হবে। আপনি দেখতে পারেন, এর ফলে কিছু টেক্সট overflowing বক্সের বাইরে হয়েছে।
overflow visible মান, যদিও উপকারী, overflow প্রোপার্টির অন্যান্য মানগুলোর চেয়ে কম উপযুক্ত হতে পারে। এটি কারণ অধিকাংশ কেসে আপনি চান না একটি এলিমেন্টের কন্টেন্ট ওভারফ্লো (overflow) হয়, কারণ ওভারফ্লোইং কন্টেন্টগুলো আপনি একটি ওয়েব পেজের জন্য তৈরি করা অন্যান্য স্টাইলগুলোর সাথে ইন্টারফিয়ার (interfere) করতে পারে।
Scroll Overflow
scroll মান আপনাকে একটি ওয়েব এলিমেন্টের ওভারফ্লোইং কন্টেন্ট ক্লিপ (clip) করতে দেয়। তারপর, এলিমেন্টে একটি স্ক্রোলবার (scrollbar) যোগ করা হয় যাতে ব্যবহারকারী এলিমেন্টের বাকি কন্টেন্ট দেখতে পারে।
scroll ওভারফ্লো মান একটি ওয়েব এলিমেন্টে একটি ভার্টিক্যাল (vertical) এবং একটি হরিজন্টাল (horizontal) স্ক্রোলবার উভয়ই যোগ করে, এমনকি আপনি যদি এই স্ক্রোলবারগুলোতে থেকে একটি প্রয়োজন না হয়।
মান লইজिए আমরা একটি বক্স ডিজাইন করছি এবং আমরা চাই যে কোনো ওভারফ্লোইং টেক্সট আমাদের বক্সের ভিতরে থাকবে। যদি কোনো ওভারফ্লোইং টেক্সট উপস্থিত থাকে, একটি স্ক্রোলবার ظاهر হবে যাতে ব্যবহারকারী বক্সের মাধ্যমে নেভিগেট করতে পারে।
এখানে যে কোডটি আমরা ব্যবহার করতে পারি আমাদের বক্স ডিজাইন করতে:
index.html
<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS overflow property and assign it the value "scroll".</div>
styles.css
div { width: 200px; height: 100px; background-color: lightgray; overflow: scroll; }আমাদের কোডের আউটপুট:
[Code result here]
আমাদের কোডে, আমরা একটি বক্স তৈরি করেছি 200px প্রস্থের এবং 100px উচ্চতার। আমাদের বক্সের একটি হালকা স্লেটি ব্যাকগ্রাউন্ড রঙ রয়েছে।
আরও, আমরা overflow প্রোপার্টিটি "scroll" এর সমান সেট করেছি। আপনি দেখতে পারেন, কারণ আমাদের বক্সে ফিট হতে túl বেশি টেক্সট রয়েছে, একটি স্ক্রোলবার ظاهر হয় এবং আমাদের ওভারফ্লোইং টেক্সট আমাদের বক্সের বর্ডারগুলির মধ্যে থাকে।
Auto Overflow
গত বিভাগে আমরা আলোচনা করেছি যে scroll প্রোপার্টি একটি ওয়েব এলিমেন্টে উভয় হরিজন্টাল এবং ভার্টিক্যাল স্ক্রোলবার যোগ করে, এমনকি যদি এই স্ক্রোলবারগুলোতে থেকে একটি প্রয়োজন না হয়।
এটি অনেক কেসে উপকারী হতে পারে, কিন্তু যখন আপনি একটি ওয়েব এলিমেন্ট ডিজাইন করছেন তখন আপনি শুধু প্রাসঙ্গিক স্ক্রোলবারটি দেখাতে চাইতে পারেন। এটি করতে, আপনি auto মান ব্যবহার করতে পারেন।
auto মান একইভাবে কাজ করে scroll মানের মত, কিন্তু এটি শুধু একটি ওয়েব এলিমেন্টে স্ক্রোলবার যোগ করে যখন এটি প্রয়োজন। মান লইজिए আমাদের একটি টেক্সট বক্স আছে এবং আমরা শুধু যখন প্রয়োজন হয় তখন বক্সে স্ক্রোলবার যোগ করতে চাই। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:
index.html
<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS overflow property and assign it the value "auto".</div>
styles.css
div { width: 200px; height: 100px; background-color: lightgray; overflow: auto; }আমাদের কোডের আউটপুট:
[Code result here]
আমাদের উপরের উদাহরণে, আমরা একটি 200px প্রস্থের এবং 100px উচ্চতার বক্স তৈরি করেছি হালকা স্লেটি ব্যাকগ্রাউন্ডসহ। আমরা তারপর overflow প্রোপার্টির মান auto সেট করেছি। আপনি দেখতে পারেন, আমাদের ফাইনাল রেজাল্টে শুধু একটি স্ক্রোলবার দেখাচ্ছে। এটি কারণ শুধু একটি স্ক্রোলবার প্রয়োজন আমাদের টেক্সট বক্সের ওভারফ্লোইং কন্টেন্ট দেখাতে।
Hidden Overflow
আপনি সিদ্ধান্ত নিতে পারেন যে আপনি একটি এলিমেন্টে যেকোনো ওভারফ্লোইং কন্টেন্ট ক্লিপ (clip) করতে চান, তারপর ব্যবহারকারীর কাছ থেকে লুকাতে চান। এটি hidden ওভারফ্লো মান ব্যবহার করে সম্পন্ন করা হয়।
মান লইজिए আপনার একটি টেক্সট বক্স আছে যার কন্টেন্ট আপনি লুকাতে চান যদি সেগুলি এলিমেন্টের বাইরে ওভারফ্লো করে। আপনি নিচের কোড ব্যবহার করে এই বক্সটি তৈরি করতে পারেন:
index.html
<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS overflow property and assign it the value "hidden".</div>
styles.css
div { width: 200px; height: 100px; background-color: lightgray; overflow: hidden; }আমাদের কোডের আউটপুট:
[Code result here]
আমাদের আগের উদাহরণগুলোrenntে, আমাদের বক্স থেকে ওভারফ্লোইং টেক্সট ব্যবহারকারীর কাছ থেকে লুকানো আছে। এটি কারণ আমরা আমাদের কোডে overflow প্রোপার্টির মান hidden সেট করেছি।
overflow-x এবং overflow-y
overflow-x এবং overflow-y প্রোপার্টিগুলি আপনাকে কন্টেন্টের ওভারফ্লো কীভাবে হ্যান্ডল করা হবে সেটি প্রতিটি অক্ষ (axis) আলাদা আলাদা পরিবর্তন করতে দেয়।
overflow-x প্রোপার্টি নির্দিষ্ট করে একটি বক্সের বাম এবং ডান প্রান্তের ওভারফ্লো কীভাবে হ্যান্ডল করা হবে, এবং overflow-y প্রোপার্টি নির্দিষ্ট করে একটি বক্সের উপরের এবং নিচের প্রান্তের ওভারফ্লো কীভাবে হ্যান্ডল করা হবে।
মান লইজिए আপনি একটি বক্স ডিজাইন করছি এবং আপনি x এবং y-অক্ষের জন্য দুটি ভিন্ন ওভারফ্লো মান সেট করতে চান। x-অক্ষটি hidden ওভারফ্লো মান ব্যবহার করা উচিত, এবং y-অক্ষটি scroll ওভারফ্লো মান ব্যবহার করা উচিত। আপনি নিচের কোড ব্যবহার করে এই কাজটি সম্পন্ন করতে পারেন:
index.html
<div>This is a box with some text. We are using this box to illustrate what happens when you use the CSS x-overflow and y-overflow properties to set overflow values for the individual axes in a web element.</div>
styles.css
div { width: 200px; height: 100px; background-color: lightgray; overflow-x: hidden; overflow-y: vertical; }আমাদের কোডের আউটপুট:
[Code result here]
আপনি দেখতে পারেন, আমাদের বক্সের কোনো হরিজন্টাল স্ক্রোলবার নেই। এটি কারণ আমরা overflow-x-এর মান "hidden" সেট করেছি। যাইহোক, আমাদের বক্সে একটি ভার্টিক্যাল স্ক্রোলবার আছে, যা ظاهر হয় কারণ আমরা overflow-y-এর মান "scroll" সেট করেছি।
উপসংহার (Conclusion)
CSS overflow প্রোপার্টি নির্দিষ্ট করে একটি এলিমেন্টের কন্টেন্ট কীভাবে দেখাবে যদি এলিমেন্টের কন্টেন্ট অ্যাসাইন করা এলাকায় ফিট হওয়া বড় হয়।
এই টিউটোরিয়ালে, কিছু উদাহরণের রেফারেন্স নিয়ে, CSS overflow প্রোপার্টি এবং এর চারটি মান কীভাবে ব্যবহার করে ওয়েব এলিমেন্টে ওভারফ্লো নিয়ন্ত্রণ করতে হয় তা অন্বেষণ করা হয়েছে। এখন আপনি CSS overflow প্রোপার্টি এক্সপার্ট ডেভেলপারের মত ব্যবহার করার জন্য প্রস্তুত।
