CSS Overflow Property क्या हैं पूरी जानकारी हिंदी में? – Hindi tutorial

WhatsApp Group Join Now
Telegram Group Join Now

हेल्लो दोस्तों ! आज हम इस आर्टिकल में  CSS Overflow Property  के बारें में पढेंगे. इसे बहुत ही आसान भाषा में लिखा गया है. इसे आप पूरा पढ़िए, यह आपको आसानी से समझ में आ जायेगा. तो चलिए शुरू करते हैं :-

CSS Overflow Property क्या हैं पूरी जानकारी हिंदी में? - Hindi tutorial

CSS overflow Property का परिचय –

जब Content किसी Element की Width और Height से ज्यादा बडा होता हैं तो उस स्थिति को संभालने के लिए CSS Overflow Property का Use किया जाता हैं. इसे एक उदाहरण द्वारा समझते हैं.

माना एक Div Element की Width 300px हैं और इसकी Height 300px हैं. अब इस Div में एक Image Define करते हैं. जिसकी Width 300px और Height 400px हैं. तो अब क्या होगा? नीचे देंखे.

 

आपने ऊपर देखा कि Image Container Div से बाहर भी Show हो रही हैं. इस Situation को ही Overflow कहा जाता हैं. CSS द्वारा Overflow को Control करने के लिए ही Overflow Property को बनाया गया हैं.

CSS overflow Property Values के विभिन्न प्रकार –

Element के अनुसार Overflow Situation को नियंत्रित किया जाता हैं. जिसके लिए कई प्रकार की Overflow Values बनाई गई हैं. नीचे इनके बारे में विस्तार से बताया जा रहा हैं.

इसे पढ़े :-  CSS text properties in hindi-css टेक्स्ट प्रॉपर्टीज क्या है? - Hindi tutorial

1. Visible –

इस Overflow Value से Content Show किया जाता हैं. visible Overflow Property की Default Value होती हैं. इसके द्वारा Content Container Size के बाहर भी दिखाई देता हैं.

इसे Try कीजिए –

<!DOCTYPE html>
 <html>
   <head>
        <title>CSS Overflow visible Value Examples</title>
<style type=”text/css”>
   div {
          height: 100px; 
          width: 150px; 
          border: 3px solid red;
          overflow:visible;
        }

</style>
<body>
   <div>
    <p>This paragraph text is written inside a div tag. This div is 150px wide 
     and has 100px height.This paragraph text is written inside a div tag. This 
     div is 150px wide and has 50px height. </p>
    </div>
</body>
</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

 

CSS Overflow Property क्या हैं पूरी जानकारी हिंदी में? - Hindi tutorial

WhatsApp Group Join Now
Telegram Group Join Now

 

2. Hidden –

इस Value में सिर्फ Container में समाहित होने वाला Content ही दिखाई देता हैं. बाकि Content Hide हो जाता हैं.

इसे Try कीजिए –

<!DOCTYPE html>
 <html>
  <head>
     <title>CSS Overflow hidden Value Examples</title>
 <style type=”text/css”>
     div {
               height: 100px; width: 150px; border: 3px solid red;overflow:hidden;
}
</style>
<body>
 <div>
  <p>This paragraph text is written inside a div tag. This div is 150px 
      wide and has 100px height.This paragraph text is written inside a div tag. 
      This div is 150px wide and has 50px height. </p>
 </div>
</body>
</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

इसे पढ़े :-  CSS Color Property in Hindi की हिंदी में जानकारी

CSS Overflow Property क्या हैं पूरी जानकारी हिंदी में? - Hindi tutorial

3. Scroll –

इस Value में Container Size में ही Content दिखाई देता हैं. लेकिन, इसके साथ-साथ बाकि Content को भी Users देख सकते हैं. यह Value Container में Scrolling Add कर देती हैं.

इसे Try कीजिए

<!DOCTYPE html>
  <html>
     <head>
             <title>CSS Overflow scroll Value Examples</title>
 <style type=”text/css”>
   div {
            height: 100px; width: 150px; border: 3px solid red;overflow:scroll;
          }
</style>
<body>
    <div>
    <p>This paragraph text is written inside a div tag. This div is 150px 
       wide and has 100px height.This paragraph text is written inside a div tag.
        This div is 150px wide and has 50px height. </p>

    </div>
</body>
</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

CSS Overflow Property क्या हैं पूरी जानकारी हिंदी में? - Hindi tutorial

 

4. auto –

इस Value द्वारा भी Container में Scroll Bars Add हो जाती हैं.

   इसे Try कीजिए –

<!DOCTYPE html>
 <html>
  <head>
      <title>CSS Overflow auto Value Examples</title>
 <style type=”text/css”>
    div {
             height: 100px; width: 150px; border: 3px solid red;overflow:auto;
        }
 </style>
<body>
  <div>
         <p>This paragraph text is written inside a div tag. This div is 150px wide and has
         100px height.This paragraph text is written inside a div tag. This div is 150px 
          wide and has 50px height. </p>

 </div>
</body>
</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

CSS Overflow Property क्या हैं पूरी जानकारी हिंदी में? - Hindi tutorial

 5. Overflow-x Property –

यदि आप Left एवं Right Side के लिए अलग से Overflow Rule Set करना चाहते हैं. तब Overflow-x Property का इस्तेमाल किया जाता हैं. इसकी Values भी Overflow Property के समान ही रहती हैं.

इसे पढ़े :-  CSS width Property क्या हैं पूरी जानकारी हिंदी में? - Hindi Tutorial

इसे Try कीजिए –

<!DOCTYPE html>
 <html>
  <head>
       <title>CSS overflow-x Property Examples</title>

<style type=”text/css”>
  div {
           height: 100px; width: 150px; border: 3px solid red;overflow:scroll; 
           overflow-x:hidden;
         }

</style>
<body>
  <div>

      <p>This paragraph text is written inside a div tag. This div is 150px wide 
        and has 100px height. This paragraph text is written inside a div tag. 
          This div is 150px wide and has 50px height. </p>

</div>
</body>

</html>
WhatsApp Group Join Now
Telegram Group Join Now

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

CSS Overflow Property क्या हैं पूरी जानकारी हिंदी में? - Hindi tutorial

6. Overflow-y –

यदि आप Top एवं Bottom Side के लिए अलग से Overflow Rule Set करना चाहते हैं. तब Overflow-y Privacy का इस्तेमाल किया जाता हैं. इसमें वे सभी Values Use होती हैं. जिन्हे Overflow Property के लिए इस्तेमाल किया जाता हैं.

इसे Try कीजिए –

<!DOCTYPE html>
  <html>
    <head>
         <title>CSS overflow-y Property Examples</title>

<style type=”text/css”>
  div {
    height: 100px; width: 150px; border: 3px solid red;overflow:scroll; overflow-y:hidden;
      }

</style>
<body>
  <div>

    <p>This paragraph text is written inside a div tag. This div is 150px wide and has 
       100px height. This paragraph text is written inside a div tag. This div is 
       150px wide and has 50px height.</p>

  </div>
</body>
</html>

ऊपर दिया कोड इस प्रकार का परिणाम देगा.

 

CSS Overflow Property क्या हैं पूरी जानकारी हिंदी में? - Hindi tutorial

Leave a Reply

error: Content is protected !!