CSS - Overflow Property

Previous
Next

CSS overflow is a shorthand property that specifies how to handle content that overflows the boundaries of its container. It can be used to clip the content, add scrollbars, or display an ellipsis.

The overflow property only works for block-level elements with a specified height or width. The overflow property can be used to control the overflow of content in both the horizontal and vertical directions.

CSS provides following possible values for overflow property to handle content that overflows an element's box.

  • visible − The content is not clipped and will overflow the container.

  • hidden − The content is clipped and the overflow is not visible. There are no scroll bars, and the clipped content is not visible.

  • clip − The content is clipped when it proceeds outside its box.This can be used with overflow-clip-margin to set the clipped area.

  • scroll − A scrollbar is added to the container so that the user can scroll to see the overflowed content.

  • auto − A scrollbar is added to the container only when the content overflows.

CSS overflow - With visible and hidden Values

Following example shows how to set the CSS overflow property to visible or hidden. The default value is visible, which allows content to overflow its boundaries. The hidden value hides any overflowing content.

<html>
<head>
<style>
   .container {
      display: flex;
   }
   .overflow-visible {
      height: 130px;
      width: 250px;
      overflow: visible;
      border: 2px solid #000000;
      background-color: #2fe262;
      padding: 5px;
      margin-right: 15px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
   .overflow-hidden {
      height: 130px;
      width: 250px;
      overflow: hidden;
      border: 2px solid #000000;
      background-color: #2fe262;
      padding: 5px;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="overflow-visible">
         <h4>Tutorialspoint CSS Overflow Visible</h4>
         <p>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.</p>
      </div>
      <div class="overflow-hidden">
         <h4>Tutorialspoint CSS Overflow Hidden</h4>
         <p>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.</p>
      </div>
   </div>
</body>
</html>

CSS overflow - clip Value

The following example shows how to hide overflowing content of an element by setting the CSS overflow property to clip.

<html>
<head>
<style>
   div {
      height: 130px;
      width: 250px;
      overflow: clip;
      border: 2px solid #000000;
      background-color: #2fe262;
      padding: 5px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
</style>
</head>
<body>
   <div>
      <h4>Tutorialspoint CSS Overflow Clip</h4>
      <p>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 type setting, remaining essentially unchanged.</p>
   </div>
</body>
</html>

CSS overflow - With scroll and auto Values

The following example determines how the CSS overflow property can be set to scroll or auto. Scroll always adds a scrollbar, while auto only adds a scrollbar when needed.

<html>
<head>
<style>
   .container {
      display: flex;
   }
   .overflow-scroll {
      height: 130px;
      width: 250px;
      overflow: scroll;
      border: 2px solid #000000;
      background-color: #2fe262;
      padding: 5px;
      margin-right: 15px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
   .overflow-auto {
      height: 130px;
      width: 250px;
      overflow: auto;
      border: 2px solid #000000;
      background-color: #2fe262;
      padding: 5px;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="overflow-scroll">
         <h4>Tutorialspoint CSS Overflow Scroll</h4>
         <p>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.</p>
      </div>
      <div class="overflow-auto">
         <h4>Tutorialspoint CSS Overflow Auto</h4>
         <p>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.</p>
      </div>
   </div>
</body>
</html>

CSS Overflow - Related Properties

Following is the list of CSS properties of overflow:

property value
overflow-x Displays overflowing content in the horizontal direction.
overflow-y Displays overflowing content in the vertical direction.
overflow-anchor Determines whether the browser will scroll the page to keep an element in view.
overflow-block Determines how the content of an element behaves when it is too wide to fit inside its container.
overflow-inline Determines how content is displayed when it overflows the left and right edges of an element.
overflow-clip-margin Determines how far the content of an element can overflow its box before being clipped.
overflow-wrap Determines whether the browser can break a line of text within an unbreakable string.
Print Page
Previous
Next
Advertisements