CSS
बाढ़

वाक्य - विन्यास

• अतिप्रवाह: दृश्यमान | छिपा हुआ | स्क्रॉल करें | ऑटो | प्रारंभिक | वारिस;

पैरामीटर

टिप्पणियों

अतिप्रवाह: स्क्रॉल करें

एचटीएमएल

<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>

अतिप्रवाह: दृश्यमान

एचटीएमएल

<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;
}