CSS ওভারফ্লো
সিএসএস ওভারফ্লো প্রপার্টি নির্দিষ্ট করে যে বিষয়বস্তু যখন তার ব্লক লেভেলের কন্টেইনার ওভারফ্লো করে তখন কীভাবে তা পরিচালনা করতে হয়।
আমরা জানি যে একটি পৃষ্ঠার প্রতিটি উপাদান একটি আয়তক্ষেত্রাকার বাক্স এবং এই বাক্সগুলির আকার, অবস্থান এবং আচরণ CSS এর মাধ্যমে নিয়ন্ত্রিত হয়।
আসুন একটি উদাহরণ নেওয়া যাক: আপনি যদি বাক্সের উচ্চতা সেট না করেন তবে এটি সামগ্রীর মতো বড় হবে। কিন্তু আপনি যদি বাক্সের একটি নির্দিষ্ট উচ্চতা বা প্রস্থ সেট করেন এবং ভিতরের বিষয়বস্তু ফিট না হয় তবে কী হবে। এই সমস্যাটি কাটিয়ে উঠতে CSS ওভারফ্লো প্রপার্টি ব্যবহার করা হয়। এটি বিষয়বস্তু ক্লিপ করতে, স্ক্রোল বার রেন্ডার করতে, বা কেবল সামগ্রী প্রদর্শন করতে হবে কিনা তা নির্দিষ্ট করে।
CSS ওভারফ্লো প্রপার্টির মান
| Value | Description |
|---|---|
| visible | এটি নির্দিষ্ট করে যে ওভারফ্লো ক্লিপ করা হয় না। এটি উপাদানের বাক্সের বাইরে রেন্ডার করে। এটি একটি ডিফল্ট মান। |
| hidden | এটি নির্দিষ্ট করে যে ওভারফ্লো ক্লিপ করা হয়েছে, এবং বাকি বিষয়বস্তু অদৃশ্য হবে। |
| scroll | এটি নির্দিষ্ট করে যে ওভারফ্লোটি ক্লিপ করা হয়েছে এবং বাকি বিষয়বস্তু দেখতে একটি স্ক্রল বার ব্যবহার করা হয়। |
| auto | এটি নির্দিষ্ট করে যে ওভারফ্লো ক্লিপ করা হলে, বাকি বিষয়বস্তু দেখার জন্য একটি স্ক্রল বার প্রয়োজন. |
| inherit | এটি তার মূল উপাদান থেকে সম্পত্তি উত্তরাধিকারসূত্রে পায়। |
| initial | এটি সম্পত্তিটিকে তার প্রাথমিক মান সেট করতে ব্যবহৃত হয়। |
CSS ওভারফ্লো উদাহরণ
আসুন একটি সাধারণ CSS ওভারফ্লো প্রপার্টি দেখি।
- >
- html>
- <head>
- <style>
- div.scroll {
- background-color: #00ffff;
- width: 100px;
- height: 100px;
- overflow: scroll;
- }
- div.hidden {
- background-color: #00FF00;
- width: 100px;
- height: 170px;
- overflow: hidden;
- }
- <style>
- <head>
- <body>
- <p>The overflow property specifies what to do if the content of an element exceeds the size of the element’s box.p>
- <p>overflow:scrollp>
- <div class=“scroll”>You can use the overflow property when you want to have better control of the layout.
- The default value is visible.div>
- <p>overflow:hiddenp>
- <div class=“hidden”>You can use the overflow property when you want to have better control of the layout.
- The default value is visible.div>
- <body>
- html>
আউটপুট:
ওভারফ্লো প্রপার্টি নির্দিষ্ট করে যদি কোনো এলিমেন্টের বিষয়বস্তু এলিমেন্টের বাক্সের আকারের চেয়ে বেশি হয় তাহলে কি করতে হবে।
overflow: scroll
overflow:hidden
