CSS 属性

CSS Overflow-block 属性决定元素内容超出其框的左右边界时的行为方式。

属性 Overflow-block 仅在 Firefox 浏览器上受支持.

属性值

  • visible: 允许内容溢出元素的框。

  • hidden: 隐藏溢出内容。

  • clip: 剪辑溢出值会剪辑溢出内容并使其不可见。

  • scroll: 通过添加滚动条使元素可滚动。

  • auto: 向元素添加滚动条，以便用户可以查看其溢出内容。

适用范围

所有 HTML 元素。

DOM 语法

object.style.overflowBlock = "visible|hidden|clip|scroll|auto";
属性溢出阻止仅在 Firefox 浏览器上受支持。因此，所有示例仅适用于 Firefox 浏览器。

CSS Overflow-block: visible 和 hidden

overflow-block 属性控制元素的内容是否可以溢出其内容边界。可见值允许内容溢出，而隐藏值则隐藏任何溢出的内容。

<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>yxjc123 CSS Overflow-block Visible</h4>
         I think success has no rules, but you can learn a lot from failure. 
      </div>
      <div class="overflow-block-hidden">
         <h4>yxjc123 CSS Overflow-block Hidden</h4>
         I think success has no rules, but you can learn a lot from failure. 
      </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<yxjc123 CSS Overflow-block Clip</h4>
      I think success has no rules, but you can learn a lot from failure. 
   </div>
</body>
</html>

CSS Overflow-block: 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>yxjc123 CSS Overflow-block Scroll</h4>
         I think success has no rules, but you can learn a lot from failure. 
      </div>
      <div class="overflow-block-auto">
         <h4>yxjc123 CSS Overflow-block Auto</h4>
         I think success has no rules, but you can learn a lot from failure. 
      </div>
   </div>
</body>
</html>