welcome to tutorialfamily

css overflow

this property use for applying content scroll, hidden content, overflow auto.


css overflow

  • visible: content will be display out of box area
  • hidden: content will not be display out of box area
  • scroll: you can see all content via scroll
  • auto: width of an element
  • max-height: max-width of an element
  • min-height: it similar to scroll

css overflow visible


						        
<!DOCTYPE html>
<html>
<head>
   <title>css tutorial</title>
<style>
div{ 
   height: 300px;
   width: 200px;
   border: 1px solid #000;
   color: #000;
   font-size: 14px;
   overflow: visible;
}
</style>
</head>
<body>
   <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>


Run

css overflow hidden


						        
<!DOCTYPE html>
<html>
<head>
   <title>css tutorial</title>
<style>
div{ 
   height: 300px;
   width: 200px;
   border: 1px solid #000;
   color: #000;
   font-size: 14px;
   overflow: hidden;
}
</style>
</head>
<body>
   <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>


Run

css overflow scroll


						        
<!DOCTYPE html>
<html>
<head>
   <title>css tutorial</title>
<style>
div{ 
   height: 300px;
   width: 200px;
   border: 1px solid #000;
   color: #000;
   font-size: 14px;
   overflow: scroll;
}
</style>
</head>
<body>
   <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>


Run

css overflow auto


						        
<!DOCTYPE html>
<html>
<head>
   <title>css tutorial</title>
<style>
div{ 
   height: 300px;
   width: 200px;
   border: 1px solid #000;
   color: #000;
   font-size: 14px;
   overflow: auto;
}
</style>
</head>
<body>
   <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>


Run

Our Content