CSS Overflow

Next ❯CSS Float

Used to to handle the content in limited space as well as when it overflows

  • turned_in_notOutline Properties
    • overflow-x
    • overflow-y
    • overflow

If your content is too big to adjust it into a limited space, then this feature actually helps a lot to show all content in limited space

p {
  overflow-x: visible;
  overflow-y: visible;
  width:100px;
  height:80px;
  background-color:pink;
}
overflowsubject
overflowclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
p {
  overflow-x: visible;
  overflow-y: visible;
  width:100px;
  height:80px;
  background-color:pink;
}
</style>
</head>
<body>
  <p>If your content is too big to adjust it into a limited space, then this feature actually helps a lot to show all content in limited space</p>
</body>
</html>
  • label_outlineTryout Others
    PropertiesValues
    overflow-x:
    overflow-y:

If your content is too big to adjust it into a limited space, then this feature actually helps a lot to show all content in limited space

p {
/*overflow:overflow-x&overflow-y */
  overflow:auto;
  height:80px;
  width:100px;
}
overflow (All-In-One)subject
overflow (All-In-One)close
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
p {
/*overflow:overflow-x&overflow-y*/
  overflow:auto;
  height:80px;
  width:100px;
  background-color:pink;
}
</style>
</head>
<body>
  <p>If your content is too big to adjust it into a limited space, then this feature actually helps a lot to show all content in limited space</p>
</body>
</html>
Tryout more
overflow:auto;
overflow:visible;
overflow:hidden;
overflow:scroll;

  • CSS Float
❮ Prev CSS Position
Next ❯CSS Float
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯