हेल्लो दोस्तों ! आज हम इस आर्टिकल में CSS Overflow Property के बारें में पढेंगे. इसे बहुत ही आसान भाषा में लिखा गया है. इसे आप पूरा पढ़िए, यह आपको आसानी से समझ में आ जायेगा. तो चलिए शुरू करते हैं :-
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 बनाई गई हैं. नीचे इनके बारे में विस्तार से बताया जा रहा हैं.
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>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
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>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
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>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
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>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
5. Overflow-x Property –
यदि आप Left एवं Right Side के लिए अलग से Overflow Rule Set करना चाहते हैं. तब Overflow-x Property का इस्तेमाल किया जाता हैं. इसकी Values भी Overflow Property के समान ही रहती हैं.
इसे 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>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
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>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
