खोज…
वाक्य - विन्यास
- अतिप्रवाह: दृश्यमान | छिपा हुआ | स्क्रॉल करें | ऑटो | प्रारंभिक | वारिस;
पैरामीटर
Overflow मूल्य | विवरण |
|---|---|
visible | तत्व के बाहर सभी अतिप्रवाह सामग्री को दिखाता है |
scroll | अतिप्रवाह सामग्री को छुपाता है और एक स्क्रॉल बार जोड़ता है |
hidden | अतिप्रवाह सामग्री को छुपाता है, दोनों स्क्रॉल बार गायब हो जाते हैं और पृष्ठ ठीक हो जाता है |
auto | यदि सामग्री ओवरफ्लो होती है, तो scroll रूप में भी, लेकिन सामग्री फिट होने पर स्क्रॉल बार नहीं जोड़ता है |
inherit | इनहेरिट इस संपत्ति के मूल तत्व का मूल्य है |
टिप्पणियों
जब यह तत्व प्रदर्शित करने के लिए एक तत्व बहुत छोटा है, तो क्या होता है? डिफ़ॉल्ट रूप से, सामग्री बस अतिप्रवाह करेगी और तत्व के बाहर प्रदर्शित होगी। जिससे आपका काम ख़राब दिखता है। आप चाहते हैं कि आपका काम अच्छा लगे, इसलिए आप अतिप्रवाह सामग्री को वांछनीय तरीके से संभालने के लिए अतिप्रवाह संपत्ति सेट करें।
overflow-x और overflow-y संपत्तियों के लिए overflow संपत्ति के मूल्य समान हैं, प्रत्येक अक्ष पर लागू होने वाली छूट
overflow-wrap प्रॉपर्टी को word-wrap प्रॉपर्टी के रूप में भी जाना जाता है।
महत्वपूर्ण नोट: अतिप्रवाह संपत्ति का उपयोग करने के लिए दृश्यमान मूल्य के साथ एक नया ब्लॉक स्वरूपण संदर्भ बनाएगा।
अतिप्रवाह: स्क्रॉल करें
एचटीएमएल
<div>
This div is too small to display its contents to display the effects of the overflow property.
</div>
सीएसएस
div {
width:100px;
height:100px;
overflow:scroll;
}
परिणाम
ऊपर दी गई सामग्री को 100px बॉक्स द्वारा 100px में क्लिप किया गया है, जिसमें ओवरफ्लो करने वाली सामग्री को देखने के लिए स्क्रॉलिंग उपलब्ध है।
अधिकांश डेस्कटॉप ब्राउज़र क्षैतिज और ऊर्ध्वाधर स्क्रॉलबार दोनों को प्रदर्शित करेंगे, चाहे कोई भी सामग्री क्लिप की गई हो या नहीं। यह स्क्रॉलबार के गतिशील वातावरण में दिखाई देने और गायब होने की समस्याओं से बच सकता है। प्रिंटर्स ओवरफ्लोइंग कंटेंट को प्रिंट कर सकते हैं।
ओवरफ़्लो- चादर
overflow-wrap एक ब्राउज़र को बताता है कि यह एक लक्षित तत्व के अंदर पाठ की एक पंक्ति को कई लाइनों में तोड़ सकता है अन्यथा एक अटूट जगह पर। यह कंटेनर के अतिप्रवाह के कारण लेआउट समस्याओं के कारण पाठ की एक लंबी स्ट्रिंग को रोकने में मददगार है।
सीएसएस
div {
width:100px;
outline: 1px dashed #bbb;
}
#div1 {
overflow-wrap:normal;
}
#div2 {
overflow-wrap:break-word;
}
एचटीएमएल
<div id="div1">
<strong>#div1</strong>: Small words are displayed normally, but a long word like <span style="red;">supercalifragilisticexpialidocious</span> is too long so it will overflow past the edge of the line-break
</div>
<div id="div2">
<strong>#div2</strong>: Small words are displayed normally, but a long word like <span style="red;">supercalifragilisticexpialidocious</span> will be split at the line break and continue on the next line.
</div>
overflow-wrap - मूल्य | विवरण |
|---|---|
normal | यदि यह लाइन से अधिक लंबा हो तो एक शब्द अतिप्रवाह देता है |
break-word | यदि आवश्यक हो, तो एक शब्द को कई लाइनों में विभाजित किया जाएगा |
inherit | इस गुण के लिए मूल तत्व का मान रखता है |
अतिप्रवाह: दृश्यमान
एचटीएमएल
<div>
Even if this div is too small to display its contents, the content is not clipped.
</div>
सीएसएस
div {
width:50px;
height:50px;
overflow:visible;
}
परिणाम
यदि यह इसके कंटेनर के आकार से अधिक है तो सामग्री क्लिप नहीं की गई है और सामग्री बॉक्स के बाहर प्रदान की जाएगी।
ओवरफ्लो के साथ निर्मित ब्लॉक फॉर्मेटिंग संदर्भ
visible लिए भिन्न मान के साथ overflow संपत्ति का उपयोग करने से एक नया ब्लॉक स्वरूपण संदर्भ बनेगा। यह एक फ्लोटेड तत्व के बगल में एक ब्लॉक तत्व को संरेखित करने के लिए उपयोगी है।
सीएसएस
img {
float:left;
margin-right: 10px;
}
div {
overflow:hidden; /* creates block formatting context */
}
एचटीएमएल
<img src="http://placehold.it/100x100">
<div>
<p>Lorem ipsum dolor sit amet, cum no paulo mollis pertinacia.</p>
<p>Ad case omnis nam, mutat deseruisse persequeris eos ad, in tollit debitis sea.</p>
</div>
परिणाम
यह उदाहरण दिखाता है कि overflow संपत्ति सेट के साथ एक div के भीतर पैराग्राफ एक फ्लोटेड छवि के साथ कैसे इंटरैक्ट करेगा।
ओवरफ्लो-एक्स और ओवरफ्लो-वाई
ये दोनों गुण एक समान फैशन में overflow संपत्ति के रूप में काम करते हैं और समान मूल्यों को स्वीकार करते हैं। overflow-x पैरामीटर केवल एक्स या बाएं से दाएं अक्ष पर काम करता है। overflow-y y या टॉप-टू-बॉटम एक्सिस पर काम करता है।
एचटीएमएल
<div id="div-x">
If this div is too small to display its contents,
the content to the left and right will be clipped.
</div>
<div id="div-y">
If this div is too small to display its contents,
the content to the top and bottom will be clipped.
</div>
सीएसएस
div {
width: 200px;
height: 200px;
}
#div-x {
overflow-x: hidden;
}
#div-y {
overflow-y: hidden;
}