सीएसएस लेआउट - ओवरफ्लोअव
- पिछला पृष्ठ CSS z-index
- अगला पृष्ठ CSS फ्लॉटिंग
CSS overflow एट्रिब्यूट सामग्री को जो आकार से बड़ा है कि यह निर्दिष्ट क्षेत्र में नहीं फिट हो सकता तो कैसे संभालना है।
CSS Overflow
overflow एट्रिब्यूट निर्दिष्ट करता है कि एलिमेंट के सामग्री का आकार निर्दिष्ट क्षेत्र में नहीं फिट होने पर सामग्री को कट दें या स्क्रॉलबार जोड़ें।
overflow एट्रिब्यूट को निम्नलिखित मूल्यों में से एक सेट किया जा सकता है:
विजिबल- डिफ़ॉल्ट।ओवरफ्लॉव को कट नहीं होगा।सामग्री एलिमेंट के बॉक्स के बाहर रेंडर की जाएगीहिडन- ओवरफ्लॉव को कट दिया जाएगा और बाकी सामग्री दृश्यमान नहीं होगीस्क्रॉल- ओवरफ्लॉव को कट दिया जाएगा और स्क्रॉलबार जोड़ा जाएगा ताकि बाकी सामग्री देखी जा सकेऑटो- अनुरूप, लेकिन केवल आवश्यकता पड़े है तभी स्क्रॉलबार जोड़ता हैस्क्रॉलअनुरूप, लेकिन केवल आवश्यकता पड़े है तभी स्क्रॉलबार जोड़ता है
टिप्पणी:overflow एट्रिब्यूट केवल उन ब्लॉक एलिमेंट के लिए लागू होता है जिनकी ऊंचाई निर्दिष्ट की गई है।
टिप्पणी:OS X Lion (मैक पर) में स्क्रॉलबार डिफ़ॉल्ट में छुपा है और केवल जब इसकी आवश्यकता हो तभी दिखाया जाता है (भले ही "overflow:scroll" सेट किया हो)।
overflow: visible
डिफ़ॉल्ट में ओवरफ्लॉव दृश्यमान है (विजिबल) इसका मतलब है कि यह कट नहीं होगा बल्कि एलिमेंट के बॉक्स के बाहर रेंडर किया जाएगा:
इंस्टेंस
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
overflow: hidden
यदि हिडन मूल्य निर्धारित किया जाए तो ओवरफ्लॉव को कट दिया जाएगा और बाकी सामग्री छुपाई जाएगी:
इंस्टेंस
div {
overflow: hidden;
}
overflow: scroll
यदि मूल्य को स्क्रॉलओवरफ्लॉव को कट दिया जाएगा और स्क्रॉलबार जोड़ा जाएगा ताकि बॉक्स के अंदर स्क्रॉल किया जा सके।यहां यह स्पष्ट है कि यह स्क्रॉलबार अनुक्रमित रूप से जोड़ा जाएगा (भले ही आपको इसकी आवश्यकता नहीं हो):
इंस्टेंस
div {
overflow: scroll;
}
overflow: auto
ऑटो मूल्य जैसा है स्क्रॉललेकिन यह केवल आवश्यकता पड़े है तभी स्क्रॉलबार जोड़ता है:
इंस्टेंस
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 फ्लॉटिंग
