CSS in Hindi – Introduction to Overflow Properties

  • CSS overflow properties in Hindi
  • Overflow-Y property in Hindi
  • Overflow-X property in Hindi

CSS in Hindi – Overflow Properties

जब भी हम एक website बनाते है या web page develop करते है तो कही न कही overflow property का use जरुर करना पड़ता है | क्योकि overflow property बहुत ही important होती है|

overflow property का use page के content को manage करने के लिए किया जाता है | अब वह content text भी हो सकता है या image भी हो सकता है |

overflow property का use तब किया जाता है जब हमारा content हमारे बॉक्स से बाहर निकल आता है यानी overflow होता है तब overflow property ही एक solution है | हमारे content के लिए |

उदाहरण के लिए मान लीजिये आपने एक div tag बनाया जिसका width 300px का है और उस div के अन्दर आपने paragraph लिखा और आपका paragraph जादा है तो इस condition मे paragraph बॉक्स के बाहर भी show होगा | इसी problem को solve करने के लिए overflow property का use किया जाता है |

Values of Overflow Property

overflow की problem को हम कई प्रकार से solve कर सकते है पर इसके लिए हमे overflow property की values का use करना होगा | overflow property की values निचे दी जा रही है |

  • auto
  • visible
  • hidden
  • scroll
  • overflow-x Property
  • overflow-y Property

ऊपर दिये गये blocks मे आप overflow property के values को देख सकते है पर इन value का काम अलग अलग होता है यानी इनका use अलग अलग condition मे किया जाता है |

auto Value

जब आप overflow property का value auto define करते है तो आपका content जैसे ही overflow होने की condition मे होगा ठीक वैसे ही वहा पर वर्टीकल और होरिजेंटल scroll खुद ही apply हो जाता है जिसके वजय से हमारा content overflow नही हो पाता है |

<html>
<head>
<style type="text/css">
div { width: 100px; height: 100px; overflow: auto; }
</style>
</head>
<body>
<div>
<p>Easy Hindi Tutorials is a best blog of computer programming Easy Hindi Tutorials is a best blog of computer programming Easy Hindi Tutorials is a best blog of computer programming</p>
</div>
</body>
</html>

Visible Value

जब हम overflow property का value visible define करते है तो जो content overflow हो रहा है वह content दिखाई देने लगता है | अब निचे दिये गये example को देखे |

<html>
<head>
<style type="text/css">
div       { width: 100px; height: 100px; border: 1px solid; overflow: visible;}
</style>
</head>
<body>
<div>
<p>Easy Hindi Tutorials is a best blog of computer programming Easy Hindi Tutorials is a best blog of computer programming Easy Hindi Tutorials is a best blog of computer programming</p>
</div>
</body>
</html>

Hidden Value

जब हम overflow property का value hidden define करते है तो जो content overflow हो रहा हो वह content hide हो जाता है केवल वही content दिखाई देता है जो define किये गये width and height के अन्दर आते है बाकी सारे content hide हो जाते है | अब निचे दिये गये code को देखे |

<html>
<head>
<style type="text/css">
div       { width: 100px; height: 100px; border: 1px solid; overflow: hidden;}
</style>
</head>
<body>
<div>
<p>Easy Hindi Tutorials is a best blog of computer programming Easy Hindi Tutorials is a best blog of computer programming Easy Hindi Tutorials is a best blog of computer programming</p>
</div>
</body>
</html>

Scroll Value

जब हम overflow property का value scroll define करते है तो हमारा content overflow नही होता है बल्कि वहा पर वर्टिकल और होरिजेंटल scroll apply हो जाता है | यह scroll दिये गये width के according apply होता है | इसका उदाहरण निचे दिया जा रहा है। 

<html>
<head>
<style type="text/css">
div       { width: 100px; height: 100px; border: 1px solid; overflow: scroll;}
</style>
</head>
<body>
<div>
<p>Easy Hindi Tutorials is a best blog of computer programming Easy Hindi Tutorials is a best blog of computer programming Easy Hindi Tutorials is a best blog of computer programming</p>
</div>
</body>
</html>

Overflow-x and Overflow-y Property

Css मे overflow-x and overflow-y property का use scroll को remove करने के लिए किया जाता है अब यह scroll वर्टीकल या होरिजेंटल हो सकता है और इस property के द्वारा आप scroll भी show कर सकते है और अगर चाहे तो remove भी कर सकते है | अब निचे दिये गये example को देखे |

<html>
<head>
<style type="text/css">
#div1 { width: 100px; height: 100px; border: 1px solid; overflow: scroll; overflow-x: hidden;}
#div2 { width: 100px; height: 100px; border: 1px solid; overflow: scroll; overflow-y: hidden;}
</style>
</head>
<body>
<div id="div1">
<p>Easy Hindi Tutorials is a best blog of computer programming Easy Hindi Tutorials is a best blog of computer programming Easy Hindi Tutorials is a best blog of computer programming</p>
</div>
<div id="div2">
<p>Easy Hindi Tutorials is a best blog of computer programming Easy Hindi Tutorials is a best blog of computer programming Easy Hindi Tutorials is a best blog of computer programming</p>
</div>
</body>
</html>
CSS Display Properties Next is Coming Soon
Previous Next