सीएसएस लेआउट - अतिप्रवाह
CSS overflowसंपत्ति नियंत्रित करती है कि उस सामग्री का क्या होता है जो किसी क्षेत्र में फ़िट होने के लिए बहुत बड़ी है।
सीएसएस अतिप्रवाह
संपत्ति निर्दिष्ट करती है कि overflowसामग्री को क्लिप करना है या स्क्रॉलबार जोड़ना है जब किसी तत्व की सामग्री निर्दिष्ट क्षेत्र में फिट होने के लिए बहुत बड़ी है।
संपत्ति में overflowनिम्नलिखित मूल्य हैं:
visible- चूक। अतिप्रवाह क्लिप नहीं किया गया है। सामग्री तत्व के बॉक्स के बाहर प्रस्तुत होती हैhidden- अतिप्रवाह काटा गया है, और शेष सामग्री अदृश्य हो जाएगीscroll- अतिप्रवाह को क्लिप किया जाता है, और शेष सामग्री को देखने के लिए एक स्क्रॉलबार जोड़ा जाता हैauto- के समानscroll, लेकिन यह आवश्यक होने पर ही स्क्रॉलबार जोड़ता है
नोट: संपत्ति overflowकेवल निर्दिष्ट ऊंचाई वाले ब्लॉक तत्वों के लिए काम करती है।
नोट: OS X Lion (Mac पर) में, स्क्रॉलबार डिफ़ॉल्ट रूप से छिपे होते हैं और केवल उपयोग किए जाने पर ही दिखाए जाते हैं (भले ही "ओवरफ़्लो: स्क्रॉल" सेट हो)।
अतिप्रवाह: दृश्यमान
डिफ़ॉल्ट रूप से, अतिप्रवाह है visible, जिसका अर्थ है कि इसे काटा नहीं गया है और यह तत्व के बॉक्स के बाहर प्रस्तुत करता है:
उदाहरण
div {
width: 200px;
height:
50px;
background-color: #eee;
overflow: visible;
}
ओवर फलो हिडेन
मूल्य के साथ hidden, अतिप्रवाह क्लिप किया गया है, और शेष सामग्री छिपी हुई है:
उदाहरण
div {
overflow: hidden;
}
अतिप्रवाह: स्क्रॉल
मान को पर सेट करते हुए scroll, अतिप्रवाह को क्लिप किया जाता है और बॉक्स के अंदर स्क्रॉल करने के लिए एक स्क्रॉलबार जोड़ा जाता है। ध्यान दें कि यह क्षैतिज और लंबवत दोनों तरह से एक स्क्रॉलबार जोड़ देगा (भले ही आपको इसकी आवश्यकता न हो):
उदाहरण
div {
overflow: scroll;
}
अतिप्रवाह: ऑटो
autoमान के समान है , scrollलेकिन यह आवश्यक होने पर ही स्क्रॉलबार जोड़ता है:
उदाहरण
div {
overflow: auto;
}
अतिप्रवाह-एक्स और अतिप्रवाह-वाई
और गुण निर्दिष्ट overflow-xकरता overflow-yहै कि सामग्री के अतिप्रवाह को केवल क्षैतिज या लंबवत रूप से बदलना है (या दोनों):
overflow-xनिर्दिष्ट करता है कि सामग्री के बाएँ/दाएँ किनारों के साथ क्या करना है।
overflow-yनिर्दिष्ट करता है कि सामग्री के शीर्ष/निचले किनारों के साथ क्या करना है।
उदाहरण
div {
overflow-x: hidden; /* Hide horizontal scrollbar
*/
overflow-y: scroll; /* Add vertical scrollbar */
}
सभी सीएसएस अतिप्रवाह गुण
| Property | Description |
|---|---|
| overflow | Specifies what happens if content overflows an element's box |
| overflow-wrap | Specifies whether or not the browser can break lines with long words, if they overflow its container |
| overflow-x | Specifies what to do with the left/right edges of the content if it overflows the element's content area |
| overflow-y | Specifies what to do with the top/bottom edges of the content if it overflows the element's content area |