CSS In Hindi – Overflow Property In CSS In Hindi

CSS

CSS In Hindi – CSS Overflow In Hindi – CSS me Overflow Property Kiya Hai or CSS Overflow Ko Kaise Istemal Karte Hai, Ye Sab Ham Aaj Post Me Dekhne Wale Hai Wo Bhi A to Z |

Overflow Property In CSS In Hindi

Jab Kisi Element Ka Content, Us Element Ki Set Ki Gyi Width Aur Height Ke Box Se Bahar Nikal Jata Hai, To Is Condition Ko Overflow Kaha Jata Hai | Chaliye Ek Example Se Samjhte Hai –

Example :

<!DOCTYPE html>
<html>
<head>
<style>
.overflow{
  background: Blue;
  color: black;
  padding: 15px;
  width: 50%;
  height: 200px;
  border: 3px solid Red;
}
</style>
</head>
<body>

<h2>Master Programing CSS Overflow Tutorial</h2>

<div class="overflow">This text is really long and the height of its container is only 200 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 aliquipex 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>

Output :

Hmne Dekha Ki Div Ka Conetent , Div Ki Set Ki Gyi Width Aur Height Ke Box Me Pura A Nhi Rha Aur Box Se Bahar Ja Rha Hai, Is Condition Ko Hi Overflow Bolte Hai |

Overflow Ke Karan Hmara Web Page Ekdm Kharab Dikhne Lgta Hai , Isliye Overflow Ko Rokna Chahiye | Overflow Ko Rokne Ke Liye CSS Ki Overflow Property Ka Use Kiya Jata Hai |

Values Of Overflow Property in Hindi

Overflow Ko Rokane Ke Liye oerflow Property Ka Use Kiya Jata Hai , Jiski Value Nimnlikhit Ho Skti Hai –

  • visible
  • hidden
  • scroll
  • auto

Note : Overflow Property Only Block Elements Par Hi Work Karti Hai, Aur Us Block Element Ki Height Bhi Set Ki Gyi Honi Chahiye |

overflow: visible In CSS In Hindi

Visible Overflow Property Ki Default Value Hoti Hai, Jaisa Ki Name ( Visible ) Se Hi Pta Chal Rha Ki Overflow Krne Wala Content Visible Hona Chahiye | Isliye Jab Ham Overflow Ki Value Visible Set Krte Hai To Overflow Krne Wala Content Bhi Show Hota Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: blue;
  width: 200px;
  height: 100px;
  border: 3px solid red;
  overflow: visible;
}
</style>
</head>
<body>

<h2>Master Programing CSS Overflow Tutorial</h2>

<div>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, 
  adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam .
</div>

</body>
</html>

Output :

Hmne Output Me Dekha Ki Overflow Krne Wala Content Bhi Visible Hai |

overflow: hidden In CSS In Hindi

Overflow Ki Value Hidden Set Krne Par , Overflow Krne Wala Content Hide Ho Jata Hai |

Example : Upr Diye Gye Example Me visible Ko hidden Se Replace Kr Dete Hai |

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: blue;
  width: 200px;
  height: 100px;
  border: 3px solid red;
  overflow: hidden;
}
</style>
</head>
<body>

<h2>Master Programing CSS Overflow Tutorial</h2>

<div>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,  
  adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.
</div>

</body>
</html>

Output :

Hmne Dekha Ki Overflow Ki Value hidden Set Krne Par , Overflow Krne Wala Content (Container Ke Bahar Ka Content) hide Ho Jata Hai |

overflow: scroll In CSS In Hindi

Overflow Ki Value Scroll Set Krne Par, Content Overflow Nhi Hota Aur Element Ke Container Ke Andar Scroll Bar Add Ho Jata Hai Jise Scroll Kr Ke Ham Pura Content Dekh Skte Hai |

Example : Upr Diye Gye Example Me Hi hidden Ko scroll Se Replace Kr Ke Dekhte Hai |

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: blue;
  width: 200px;
  height: 100px;
  border: 3px solid red;
  overflow: scroll;
}
</style>
</head>
<body>

<h2>Master Programing CSS Overflow Tutorial</h2>

<div>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,
  adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.
</div>

</body>
</html>

Output :

Hmne Dekha Ki Container Ke Andar Vertical Aur Horizontal Do Scroll Bar Add Ho Gye Aur Ham Pura Content Dekh Pa Rhe Hai |

overflow: auto In CSS In Hindi

Overflow Ki Auto Value , Scroll Value Ki Tarah Hi Kam Krti Hai , Bas Itna Sa Difference Hai Ki Auto Value Me Scroll Bar Tab Hi Add Hota Hai ,Jab Uski Jrurt Ho, Matlb Agar Content Overflow Nhi Ho Rha Ho To Scroll Bar Add Nhi Hoga ,Aur Jab Content Overflow Ho Rha Hota Hai , Tab Scroll Bar Add Ho Jata Hai |

Example : Upr Diye Gye Example Me Hi scroll Ko auto Se Replace Kr Ke Dekhte Hai |

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: blue;
  width: 200px;
  height: 100px;
  border: 3px solid red;
  overflow: auto;
}
</style>
</head>
<body>

<h2>Master Programing CSS Overflow Tutorial</h2>

<div>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, 
  adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.
</div>

</body>
</html>

Output :

Hmne Dekha Ki Auto Propety Bhi Scroll Ki Tarah Hi Kam Kr Rhi Hai | But Ab Ham Is Div Ki Height 300 px Kr Dete Hai , Aur Overflow Ki Value Auto Hi Rahane Dete Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: blue;
  width: 200px;
  height: 300px;
  border: 3px solid red;
  overflow: auto;
}
</style>
</head>
<body>

<h2>Master Programing CSS Overflow Tutorial</h2>

<div>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, 
  adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.
</div>

</body>
</html>

Output :

Output Me Hmne Dekha Ki Koi Overflow Nhi Ho Rha , Isliye Overflow Ki Auto Value Ko Scroll Bar Add Krne Ki Koi Jarurt Hi Nhi Hai |

overflow-x and overflow-y In CSS In Hindi

Overflow-x And Overflow-y Properties , Content Ke Horizontal Aur Vertical Overflow Ko Control Krne Ke Liye Use Ki Jati Hai |

Overflow-x And Overflow-y Ki Values visible, hidden, scroll, auto Inme Se Kuchh Bhi Set Kr Skte Hai , By Default Value visible Hoti Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: blue;
  width: 200px;
  height: 100px;
  border: 3px solid red;
  overflow-x: visible;
  overflow-y: auto;
}
</style>
</head>
<body>

<h2>Master Programing CSS Overflow Tutorial</h2>

<div>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,
  adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.
</div>

</body>
</html>

Aap Code Ko Run Krke Result Dekh Skte Hai , Ki Horizontally Content Pura Visible Hai Aur Vertical Me Content Pura Visible Nhi Tha Isliye Auto Value Ki Vajah Se Scroll Bar Add Ho Gya|

Leave a Reply

Your email address will not be published. Required fields are marked *