CSS Overflow Property का परिचय
जब Content किसी Element की Width और Height से ज्यादा बडा होता हैं। तो उस स्थिति को संभालने के लिए CSS Overflow Property का Use किया जाता हैं। इसे एक उदाहरण द्वारा समझते हैं। Suppose, एक Div Element की Width 300px हैं और इसकी Height 300px हैं। CSS द्वारा Overflow को Control करने के लिए ही Overflow Property को बनाया गया हैं.
Different Types of CSS Overflow Property Values
Element के अनुसार Overflow Situation को नियंत्रित किया जाता हैं। जिसके लिए कई प्रकार की Overflow Values बनाई गई हैं।
इनके बारे में विस्तार से बताया जा रहा हैं-
Visible
इस Overflow Value से Content Show किया जाता हैं। Visible Overflow Property की Default Value होती हैं। इसके द्वारा Content Container Size के बाहर भी दिखाई देता हैं।
<!DOCTYPE html>
<html>
<head>
<title>CSS Overflow visible Value Examples</title>
div {
height: 100px; width: 150px; border: 3px solid red;overflow:visible;
}
<body>
<div>
</body>
<style type=”text/css”>
</style>
<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>
</html>
OUTPUT-
Hidden
इस Value में सिर्फ Container में समाहित होने वाला Content ही दिखाई देता हैं। बाकि Content Hide हो जाता हैं।
<!DOCTYPE html>
<html>
<head>
<title>CSS Overflow hidden Value Examples</title>
div {
height: 100px; width: 150px; border: 3px solid red;overflow:hidden;
}
<body>
<div>
</body>
<style type=”text/css”>
</style>
<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>
</html>
OUTPUT-
Scroll
इस Value में Container Size में ही Content दिखाई देता हैं। लेकिन, इसके साथ-साथ बाकि Content को भी Users देख सकते हैं। यह Value Container में Scrolling Add कर देती हैं।
<!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>
OUTPUT-
Auto
इस Value द्वारा भी Container में Scroll Bars Add हो जाती हैं।
<!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>
Overflow-x Property
यदि Left एवं Right Side के लिए अलग से Overflow Rule Set करना चाहते हैं। तब Overflow-x Property का प्रयोग किया जाता हैं। इसकी Values भी Overflow Property के समान ही रहती हैं।
<!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>
Overflow-y
यदि Top एवं Bottom Side के लिए अलग से Overflow Rule Set करना चाहते हैं। तब Overflow-y Privacy का प्रयोग किया जाता हैं। इसमें वे सभी Values Use होती हैं। जिन्हे Overflow Property के लिए प्रयोग किया जाता हैं।
<!DOCTYPE html>
<html>
<head>
<title>CSS overflow-y Property Examples</title>
div {
height: 100px; width: 150px; border: 3px solid red;overflow:scroll; overflow-y:hidden;
}
<body>
<div>
</body>
<style type=”text/css”>
</style>
<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>
</html>
For Any Doubt Clear on Telegram Discussion Group
No comments:
Post a Comment