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>

列印頁面