CSS 媒体特性 - overflow-block

CSS overflow-block 媒体特性确定用户设备如何处理在垂直方向上超出初始容器边界的內容。

可能的值

none − 超出块轴的內容不可见。
scroll − 超出块轴的內容可以通过滚动可见。
optional-paged − 溢出的块轴內容可滚动，并且可以使用手动分页符（例如 break-inside）在新的页面上显示后续內容。
paged − 內容被分成单独的页面，并且沿块轴的任何溢出都扩展到后续页面。

语法

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

CSS overflow-block - none 值

以下示例演示了如何在內容溢出块轴时使用 CSS 媒体特性 overflow-block: none 属性，文本颜色保持黑色并添加滚动条 −

<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 值

以下示例演示了如何在內容溢出块轴时使用 CSS 媒体特性 overflow-block: scroll 属性，文本颜色更改为红色并添加滚动条 −

<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 值

以下示例演示了 CSS 媒体特性 overflow-block: optional-paged 属性的使用，当內容溢出块轴时，它会添加滚动条并手动触发溢出內容中的分页符 −

<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 值

以下示例演示了 CSS 媒体特性 overflow-block: paged 属性的使用，当內容溢出块轴时，将在下一页以绿色显示 −

<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>

打印页面