CSS 属性

CSS Overflow-inline 属性控制当溢出内容溢出元素的内联边缘时如何显示。

属性 Overflow-inline 仅在 Firefox 浏览器上受支持。因此，所有示例仅适用于 Firefox 浏览器。

属性值

  • visible: 溢出填充框的内容显示在外部其内联开始和结束边缘。

  • hidden: 内容在填充框的内联开始和结束边缘处被剪辑。

  • clip: 溢出内容在溢出剪辑的边缘被剪辑。

  • scroll: 当元素的内容超出其边界时添加滚动条。

  • auto: 当内容溢出容器时自动显示滚动条。

适用范围

所有 HTML 元素。

DOM 语法

overflow-inline: visible|hidden|clip|scroll|auto;

CSS Overflow-inline: visible 和 hidden

overflow-inline 属性可以设置为可见，以允许内容溢出填充框的边缘，或隐藏以防止其溢出。

<html>
<head>
<style>
   .container {
      display:flex;
   }
   div.overflow-inline-visible {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-inline: visible;
      margin-right: 100px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
   div.overflow-inline-hidden {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-inline: hidden;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="overflow-inline-visible">
         <h4>yxjc123 CSS Overflow-inline Visible</h4>
         I think success has no rules, but you can learn a lot from failure. 
      </div>
      <div class="overflow-inline-hidden">
         <h4>yxjc123 CSS Overflow-inline Hidden</h4>
         I think success has no rules, but you can learn a lot from failure. 
      </div>
   </div>
</body>
</html>

CSS Overflow-inline: Clip 

如果将overflow-inline属性设置为clip，则内容将如果它超出了填充框的内联尺寸，则被剪裁。不会添加滚动条。

<html>
<head>
<style>
   div.overflow-inline-clip {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-inline: clip;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
</style>
</head>
<body>
   <div class="overflow-inline-clip">
      <h4>yxjc123 CSS Overflow-inline Clip</h4>
      I think success has no rules, but you can learn a lot from failure. 
   </div>
</body>
</html>

CSS Overflow-inline: scroll和auto

以下示例演示如何将溢出内联属性设置为滚动以添加滚动条，或者仅在必要时自动添加滚动条 -

<html>
<head>
<style>
   .container {
      display:flex;
   }
   div.overflow-inline-scroll {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-inline: scroll;
      margin-right: 100px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
   div.overflow-inline-auto {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 170px;
      height: 160px;
      overflow-inline: auto;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="overflow-inline-scroll">
         <h4>yxjc123 CSS Overflow-inline Scroll</h4>
         I think success has no rules, but you can learn a lot from failure. 
      </div>
      <div class="overflow-inline-auto">
         <h4>yxjc123 CSS Overflow-inline Auto</h4>
         I think success has no rules, but you can learn a lot from failure. 
      </div>
   </div>
</body>
</html>