Introduction of CSS Overflow Property in Hindi
इस tutorial मे हम CSS Overflow Property in Hindi के बारे मे detail मे जानेंगे। जब किसी भी website के लिए web page को develop करते है तब कही ना कही overflow property का इस्तेमाल होता है।
Overflow property की मदद से content (Text या image) को manage कर सकते है। जब भी कोई content हमारे box से बाहर निकाल आता है तब Overflow Property का इस्तेमाल होता है।
उदाहरण के लिए मान लीजिये आपने एक div tag बनाया जिसका Width 400px है और उस div के अंदर आपने Paragraph लिखा और आपका paragraph की length ज्यादा है तो इस Condition मे Paragraph Box के बाहर भी show होगा। इसी Problem को Solve करने के लिए Overflow Property का Use किया जाता है।
उदाहरण
<html>
<head>
<style>
#Test {
background: #4CAF50;
color: black;
padding: 15px;
width: 50%%;
height: 100px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h3>CSS Overflow Property in Hindi</h3>
<div id="Test">This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</div>
</body>
</html>
यह उदाहरण मे text box के बाहर निकाल गया है। उसे manage करने के लिये Overflow Property का इस्तेमाल किया जाता है।
CSS Overflow
Overflow को हम कई प्रकार से Solve कर सकते है इसके लिये अलग अलग value का use किया जाता है। जो इस प्रकार से है।
- Visible
- Hidden
- Scroll
- Auto
Overflow Property सिर्फ Block Element जिसकी specific height set की है उसके साथ ही use किया जाता है।
Overflow: visible
यह Overflow property की by default value है। इस value की मदद से जो भी content Overflow हो रहा है वह दिखाई देने लगता है।
उदाहरण
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px solid black;
overflow: visible;
}
</style>
</head>
<body>
<h3>CSS Overflow Property in Hindi</h3>
<p>यह Overflow property की by default value है। इस value की मदद से जो भी content Overflow हो रहा है वह दिखाई देने लगता है।</p>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
</body>
</html>
Overflow: hidden
जब हम overflow property की value hidden define करते है तब जो भी content overflow हो रहा होता है वह hide हो जाता है। सिर्फ element की width और height के हिसाब से content दिखाई देता है।
उदाहरण
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px solid black;
overflow: hidden;
}
</style>
</head>
<body>
<h3>CSS Overflow Property in Hindi</h3>
<p>जब हम overflow property की value hidden define करते है तब जो भी content overflow हो रहा होता है वह hide हो जाता है। सिर्फ element की width और height के हिसाब से content दिखाई देता है।</p>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
</body>
</html>
Overflow: Scroll
जब हम overflow property की value scroll define करते है तब content container size मे ही दिखाई देता है और बाकी content को भी user देख सकता है। यह value container मे horizontal और verticle scroll को add कर देती है।
उदाहरण
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px solid black;
overflow: scroll;
}
</style>
</head>
<body>
<h3>CSS Overflow Property in Hindi</h3>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
</body>
</html>
Overflow: auto
auto value scroll value से similar ही है। लेकिन auto value तभी scroll को add करती है जब इसकी आवश्यकता हो।
उदाहरण
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px solid black;
overflow: auto;
}
</style>
</head>
<body>
<h3>CSS Overflow Property in Hindi</h3>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
</body>
</html>
Overflow-x and Overflow-y Property
Overflow-x या overflow-y property की मदद से horizontal या verticle scroll को show या hide किया जाता है।
उदाहरण
<html>
<head>
<style>
div {
background-color: #eee;
width: 200px;
height: 50px;
border: 1px solid black;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<h3>CSS Overflow Property in Hindi</h3>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
</body>
</html>