CSS সাজানো - অতিরিক্ত
- পূর্ববর্তী পৃষ্ঠা CSS z-index
- পরবর্তী পৃষ্ঠা CSS ফ্লোটিং
CSS overflow প্রক্রিয়াটি কনটেন্টটির মধ্যে যেমন বেশি হয় এবং এলাকাটির মধ্যে সংযোজিত হতে পারে না, তখন কনটেন্টকে কিভাবে পরিচালনা করবে তা নির্দিষ্ট করে:
CSS Overflow
overflow এই প্রক্রিয়াটি নির্দিষ্ট করে, যদি এলাকাটির মধ্যে কনটেন্টটি বেশি হয়, তবে কনটেন্টকে কাটা হবে কিংবা স্ক্রোলবার যোগ করা হবে:
overflow এই প্রক্রিয়াটি নিম্নলিখিত মান নির্ধারণ করতে পারে:
visible- ডিফল্ট। ওভারফ্লোকে কাটা হবে না। কনটেন্টটি এলাকাটির বাইরে রেন্ডার করা হবেhidden- ওভারফ্লোকে কাটা হবে, এবং বাকি কনটেন্টটি দেখা যাবে নাscroll- ওভারফ্লোকে কাটা হবে, এবং বাকি কনটেন্টকে দেখাতে স্ক্রোলবার যোগ করা হবেauto-scrollএরকমই, কিন্তু শুধুমাত্র প্রয়োজনীয় সময়েই স্ক্রোলবার যোগ করে
মন্তব্য:overflow এই প্রক্রিয়াটি শুধুমাত্র নির্দিষ্ট উচ্চতা সহযোগে ব্লক এলাকাগুলিতে কার্যকর:
মন্তব্য:ওএসএক্স লিয়ন (ম্যাকে একটি) এ, স্ক্রোলবারটি ডিফল্ট করে লুকিয়ে থাকে, এবং যখন ব্যবহার করা হয় তখনই দেখা যাবে (যদি "overflow:scroll" সংযোজিত হয়):
overflow: visible
ডিফল্ট করে, ওভারফ্লো দেখা যাবে (visible) এটা বলে যে, এটা কাটা হবে না, বরং এলাকাটির বাইরে রেন্ডার করা হবে:
ইনস্ট্যান্স
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
overflow: hidden
যদি আপনি hidden মানটি হলে, ওভারফ্লোকে কাটা হবে, এবং বাকি কনটেন্টটি লুকিয়ে যাবে:
ইনস্ট্যান্স
div {
overflow: hidden;
}
overflow: scroll
যদি মানটি হয় scrollযদি মানটি overflow: scroll করা হয়, তবে ওভারফ্লোকে কাটা হবে, এবং স্ক্রোলবার যোগ করে ফ্রেমের মধ্যে স্ক্রোল করা যাবে। পরিলক্ষণ করুন যে, এটা অনুক্রমিত এবং উভয়ই দিকে স্ক্রোলবার যোগ করবে (যদি আপনি তা চান না):
ইনস্ট্যান্স
div {
overflow: scroll;
}
overflow: auto
auto এই মানটি অনুরূপ scrollকিন্তু এটা শুধুমাত্র প্রয়োজনীয় সময়েই স্ক্রোলবার যোগ করে:
ইনস্ট্যান্স
div {
overflow: auto;
}
overflow-x এবং overflow-y
overflow-x overflow-y এই প্রক্রিয়াটি শুধুমাত্র অনুক্রমিত কিংবা উভয়ই নির্দিষ্ট করে কনটেন্টের ওভারফ্লো কিভাবে পরিবর্তন করবে:
overflow-xকনটেন্টের বাম/ডানদিকের মাঝারির প্রক্রিয়া নির্দিষ্ট করতেoverflow-yকনটেন্টের উপর/নীচের মাঝারির প্রক্রিয়া নির্দিষ্ট করতে
ইনস্ট্যান্স
div {
overflow-x: hidden; /* হরিজন্টাল স্ক্রোল বার লুকানো */
overflow-y: scroll; /* ভার্টিক্যাল স্ক্রোল বার যোগ করুন */
}
সমস্ত CSS Overflow প্রতিযোগিতা
| প্রতিযোগিতা | বর্ণনা |
|---|---|
| overflow | এইমডুল এলিমেন্টের কনটেন্ট ফ্রেমের মধ্যে কনটেন্ট ওভারফ্লো হলে কী হবে তা নির্ধারণ করে |
| overflow-x | এইমডুল এলিমেন্টের কনটেন্ট এলাকায় ওভারফ্লো হলে কনটেন্টের বাম/ডানদিকের মার্গগুলি কিভাবে হস্তক্ষেপ করা হবে তা নির্ধারণ করে |
| overflow-y | এইমডুল এলিমেন্টের কনটেন্ট এলাকায় ওভারফ্লো হলে কনটেন্টের উপর/নীচের মার্গগুলি কিভাবে হস্তক্ষেপ করা হবে তা নির্ধারণ করে |
- পূর্ববর্তী পৃষ্ঠা CSS z-index
- পরবর্তী পৃষ্ঠা CSS ফ্লোটিং
