CSS - overflow-block Property

CSS overflow-block property determines how the content of an element behaves when it exceeds the left and right boundaries of its box.

Property overflow-block is supported only on Firefox browser.

Possible Values

  • visible − The content is allowed to overflow the element's box.

  • hidden − The overflow content is hidden.

  • clip − The clip overflow value clips the overflowed content and makes it invisible.

  • scroll − The element is made scrollable by adding a scroll bar.

  • auto − A scroll bar is added to the element so that the user can view its overflow content.

Applies to

All the HTML elements.

DOM Syntax

object.style.overflowBlock = "visible|hidden|clip|scroll|auto";
Property overflow-block is supported only on Firefox browser. Hence all the examples will work only on Firefox browsers.

CSS overflow-block - With visible & hidden Values

The overflow-block property controls whether the content of an element can overflow its boundaries. The visible value allows the content to overflow, while the hidden value hides any overflowing content.

<html>
<head>
<style>
   .container {
      display:flex;
   }
   div.overflow-block-visible {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-block: visible;
      margin-right: 100px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
   div.overflow-block-hidden {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-block: hidden;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="overflow-block-visible">
         <h4>Tutorialspoint CSS Overflow-block Visible</h4>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
      </div>
      <div class="overflow-block-hidden">
         <h4>Tutorialspoint CSS Overflow-block Hidden</h4>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
      </div>
   </div>
</body>
</html>

CSS overflow-block - clip Value

The overflow-block: clip property hides any overflowing content of an element. No scrollbars are added.

<html>
<head>
<style>
   div.overflow-block-clip {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-block: clip;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
</style>
</head>
<body>
   <div class="overflow-block-clip">
      <h4<Tutorialspoint CSS Overflow-block Clip</h4>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
   </div>
</body>
</html>

CSS overflow-block - With scroll& auto Values

When the overflow-block property set to scroll and auto.The scroll always adds a scrollbar, while auto only adds a scrollbar when needed.

<html>
<head>
<style>
   .container {
      display:flex;
   }
   div.overflow-block-scroll {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-block: scroll;
      margin-right: 100px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
   div.overflow-block-auto {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-block: auto;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="overflow-block-scroll">
         <h4>Tutorialspoint CSS Overflow-block Scroll</h4>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
      </div>
      <div class="overflow-block-auto">
         <h4>Tutorialspoint CSS Overflow-block Auto</h4>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. omnis dolor repellendus. non-characteristic words, Temporibus autem quibusdam et
      </div>
   </div>
</body>
</html>
Advertisements