CSS ওভারফ্লো

ট্যাগের টেক্সটটি উপাদানের সাথে মানানসই না হয়, তাহলে পাঠ্যটি উপাদানের বাক্সের বাইরে রেন্ডার করা উচিত। আপনি দেখতে পাচ্ছেন, এর ফলে কিছু টেক্সট overflowing হয়েছে বক্সের বাইরে.

ওভারফ্লো দৃশ্যমান মান, উপযোগী হলেও, ওভারফ্লো সম্পত্তির জন্য অন্যান্য মানগুলির মতো উপযুক্ত নাও হতে পারে৷ এটি এই কারণে যে বেশিরভাগ ক্ষেত্রে আপনি একটি উপাদানের বিষয়বস্তু ওভারফ্লো করতে চান না, কারণ ওভারফ্লো হওয়া বিষয়বস্তু আপনার ওয়েব পৃষ্ঠার জন্য তৈরি করা অন্যান্য শৈলীতে হস্তক্ষেপ করতে পারে।

স্ক্রোল ওভারফ্লো

স্ক্রোল মান আপনাকে একটি ওয়েব উপাদানের উপচে পড়া বিষয়বস্তু ক্লিপ করতে দেয়। তারপরে, উপাদানটিতে একটি স্ক্রোল বার যুক্ত করা হবে যাতে ব্যবহারকারী উপচে পড়া বিষয়বস্তু দেখতে পারেন।

স্ক্রোল ওভারফ্লো মান একটি ওয়েব উপাদানে একটি উল্লম্ব এবং একটি অনুভূমিক স্ক্রল বার উভয়ই যোগ করে, এমনকি যদি আপনার এই স্ক্রোল বারের একটির প্রয়োজন না হয়।

ধরুন আমরা একটি বাক্স ডিজাইন করছি এবং আমরা চাই যে কোনো উপচে পড়া লেখা আমাদের বাক্সের ভিতরে থাকুক। কোনো উপচে পড়া পাঠ্য উপস্থিত থাকলে, একটি স্ক্রোল বার উপস্থিত হওয়া উচিত যাতে ব্যবহারকারী বাক্সের মধ্য দিয়ে তাদের পথ নেভিগেট করতে পারে।

আমাদের বক্স ডিজাইন করতে আমরা যে কোডটি ব্যবহার করতে পারি তা এখানে:

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 লম্বা একটি বাক্স তৈরি করেছি। আমাদের বাক্সে একটি হালকা ধূসর পটভূমির রঙ রয়েছে।

আরও, আমরা ওভারফ্লো প্রপার্টি "স্ক্রোল" এর সমান সেট করি। আপনি দেখতে পাচ্ছেন, যেহেতু আমাদের বাক্সে ফিট করার জন্য অনেক বেশি পাঠ্য রয়েছে, একটি স্ক্রল বার প্রদর্শিত হয় এবং আমাদের উপচে পড়া পাঠ্যটি আমাদের বাক্সের সীমানার মধ্যে থেকে যায়।

অটো ওভারফ্লো

আমরা শেষ বিভাগে উল্লেখ করেছি যে স্ক্রোল বৈশিষ্ট্য একটি ওয়েব উপাদানে অনুভূমিক এবং উল্লম্ব উভয় স্ক্রল বার যুক্ত করে, এমনকি যদি এই স্ক্রোল বারের একটির প্রয়োজন না হয়।

এটি অনেক ক্ষেত্রে কার্যকর হতে পারে, কিন্তু আপনি যখন একটি ওয়েব উপাদান ডিজাইন করছেন তখন আপনি কেবল প্রাসঙ্গিক স্ক্রোল বারটি উপস্থিত করতে চাইতে পারেন। এটি করতে, আপনি স্বয়ংক্রিয় মান ব্যবহার করতে পারেন।

স্বয়ংক্রিয় মান স্ক্রোল মানের অনুরূপভাবে কাজ করে, তবে এটি শুধুমাত্র যখন প্রয়োজন হয় তখন এটি একটি ওয়েব উপাদানে স্ক্রোল বার যোগ করে। ধরুন আমাদের কাছে পাঠ্যের একটি বাক্স আছে এবং আমরা প্রয়োজনে বাক্সে স্ক্রোল বার যোগ করতে চাই। আমরা এই কোড ব্যবহার করে তা করতে পারি:

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 চওড়া x 100px লম্বা বাক্স তৈরি করেছি। আমরা তারপর অটোতে ওভারফ্লো সম্পত্তির মান সেট করি। আপনি দেখতে পাচ্ছেন, আমাদের চূড়ান্ত ফলাফলে শুধুমাত্র একটি স্ক্রল বার দেখা যাচ্ছে। কারণ আমাদের পাঠ্য বাক্সে উপচে পড়া বিষয়বস্তু দেখানোর জন্য শুধুমাত্র একটি স্ক্রল বার প্রয়োজন।

লুকানো ওভারফ্লো

আপনি সিদ্ধান্ত নিতে পারেন যে আপনি একটি উপাদানের কোনো উপচে পড়া বিষয়বস্তু ক্লিপ করতে চান, তারপর ব্যবহারকারীর কাছ থেকে লুকিয়ে রাখতে চান। এটি লুকানো ওভারফ্লো মান ব্যবহার করে সম্পন্ন করা হয়।

ধরুন আপনার কাছে পাঠ্যের একটি বাক্স রয়েছে যার বিষয়বস্তু আপনি লুকাতে চান যদি সেগুলি উপাদানের বাইরে ওভারফ্লো হয়। আপনি এই বাক্সটি তৈরি করতে নিম্নলিখিত কোড ব্যবহার করতে পারেন:

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]


আমাদের পূর্ববর্তী উদাহরণগুলির বিপরীতে, আমাদের বক্স থেকে উপচে পড়া পাঠ্য ব্যবহারকারীর কাছ থেকে লুকানো হয়। কারণ আমরা ওভারফ্লো প্রপার্টির মান hidden সেট করেছি আমাদের কোডে।

overflow-x এবং overflow-y

ওভারফ্লো-এক্স এবং ওভারফ্লো-ওয়াই বৈশিষ্ট্যগুলি আপনাকে প্রতিটি অক্ষে বিষয়বস্তুর ওভারফ্লো পৃথকভাবে কীভাবে পরিচালনা করা হয় তা পরিবর্তন করতে দেয়।

ওভারফ্লো-এক্স প্রপার্টি নির্দিষ্ট করে যে কিভাবে একটি বাক্সের বাম এবং ডান প্রান্তে ওভারফ্লো পরিচালনা করা উচিত এবং ওভারফ্লো-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]


আপনি দেখতে পাচ্ছেন, আমাদের বাক্সে কোন অনুভূমিক স্ক্রল বার নেই। কারণ আমরা ওভারফ্লো-এক্সের মান "লুকানো" এ সেট করেছি। যাইহোক, আমাদের বক্সে একটি উল্লম্ব স্ক্রল বার রয়েছে, যা প্রদর্শিত হবে কারণ আমরা ওভারফ্লো-y-এর মান "স্ক্রোল" এ সেট করেছি।

উপসংহার

CSS ওভারফ্লো প্রপার্টি নির্দিষ্ট করে কিভাবে একটি এলিমেন্টের বিষয়বস্তু প্রদর্শিত হবে যদি এলিমেন্টের বিষয়বস্তু ওয়েব পৃষ্ঠায় নির্ধারিত এলাকায় ফিট করার জন্য খুব বড় হয়।

এই টিউটোরিয়ালটি কয়েকটি উদাহরণের রেফারেন্স সহ অনুসন্ধান করেছে, ওয়েব উপাদানগুলিতে ওভারফ্লো নিয়ন্ত্রণ করতে কীভাবে CSS ওভারফ্লো সম্পত্তি এবং এর চারটি মান ব্যবহার করতে হয়। এখন আপনি একজন বিশেষজ্ঞ ডেভেলপারের মতো CSS ওভারফ্লো প্রপার্টি ব্যবহার শুরু করতে প্রস্তুত।