CSS - overflow-block 屬性

CSS overflow-block 屬性決定了元素內容超出其盒子左右邊界時的行為。

屬性 overflow-block 僅在 Firefox 瀏覽器中受支援。

可能的值

visible − 內容允許溢位元素的盒子。
hidden − 溢位的內容被隱藏。
clip − clip 溢位值裁剪溢位的內容並使其不可見。
scroll − 透過新增捲軸使元素可滾動。
auto − 新增捲軸到元素，以便使用者可以檢視其溢位的內容。

應用於

所有 HTML 元素。

DOM 語法

object.style.overflowBlock = "visible|hidden|clip|scroll|auto";

屬性 overflow-block 僅在 Firefox 瀏覽器中受支援。因此，所有示例僅在 Firefox 瀏覽器中有效。

CSS overflow-block - 使用 visible 和 hidden 值

overflow-block 屬性控制元素的內容是否可以溢位其邊界。visible 值允許內容溢位，而 hidden 值隱藏任何溢位的內容。

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

overflow-block: clip 屬性隱藏元素的任何溢位內容。不新增捲軸。

<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 - 使用 scroll 和 auto 值

當 overflow-block 屬性設定為 scroll 和 auto 時。scroll 始終新增捲軸，而 auto 僅在需要時新增捲軸。

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

列印頁面