CSS Media Features - overflow-block

CSS overflow-block media feature determines how the user device handles content that goes beyond the initial container's boundaries in a vertical direction.

Possible Values

  • none − The content that extends beyond the block axis is not visible.

  • scroll − The content that extends beyond the block axis can be visible by scrolling.

  • optional-paged − Overflowing block axis content is scrollable, and manual page breaks (such as break-inside) can be used to display the following content on a new page.

  • paged − The content is divided into separate pages, and any overflow along the block axis extends to the subsequent page.

Syntax

overflow-block: none | scroll | optional-paged | paged;

CSS overflow-block - none Value

The following example demonstrates how to use the CSS media feature overflow-block: none property, when the content overflows the block-axis text color remains black and added scrollbar −

<html>
<head>
<style>
   @media (overflow-block: none) {
      p {
         color: red;
      }
   }
</style>
</head>
<body>
   <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</body>
</html>

CSS overflow-block - scroll Value

The following example demonstrates how to use the CSS media feature overflow-block: scroll property, when the content overflows the block-axis text color changes to the red and added scrollbar −

<html>
<head>
<style>
   @media (overflow-block: scroll) {
      p {
         color: red;
      }
   }
</style>
</head>
<body>
   <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</body>
</html>

CSS overflow-block - optional-paged Value

The following example demonstrates the use of CSS media feature overflow-block: optional-paged property, when content overflows the block-axis it adds the scrollbar and manually trigger page breaks within the overflowed content −

<html>
<head>
<style>
   .container {
      width: 700px;
      margin: 0 auto;
      padding: 20px;
   }
   .inner-section {
      margin-bottom: 20px;
   }
   img {
      height: 400px;
   }
   @media (overflow-block: optional-paged) {
      .container {
         page-break-after: avoid; 
      }
      .page-break {
         page-break-inside: always; 
      }
   }
   button {
      background-color: violet;
      padding: 5px;
   }
</style>
</head>
<body>
   <p>Click on below button to see the effect when you print the page.</p>
   <button onclick="printPage()">Print Page</button>
   <article class="container">
      <h1>Long Article Title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <img src="images/red-flower.jpg" alt="red-flower">
      <section class="inner-section">
         <h2>Section 1</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
         <div class="page-break"></div>
      </section>
   <p>More content following the section...</p>
   <img src="images/red-flower.jpg" alt="red-flower">
   </article>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

CSS overflow-block - paged value

The following example demonstrates the use of CSS media feature overflow-block: paged property, when content overflows the block axis is displayed on the next page with green color −

<html>
<head>
<style>
   img {
      height: 400px;
   }
   @media (overflow-block: paged) {
      p {
         color: green;
      }
   }
   button {
      background-color: violet;
      padding: 5px;
   }
</style>
</head>
<body>
   <h2>Click on below button to see the effect when you print the page.</p>
   <button onclick="printPage()">Print Page</button>
   <h2>hello</h2>
   <img src="images/red-flower.jpg" alt="red-flower">
   <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
   <img src="images/red-flower.jpg" alt="red-flower">
   <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>
Advertisements