CSS - overflow-inline 屬性

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 屬性設定為 visible 以允許內容溢位填充盒的邊緣，或設定為 hidden 以防止其溢位。

<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>Tutorialspoint CSS Overflow-inline 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-inline-hidden">
         <h4>Tutorialspoint CSS Overflow-inline 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-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>Tutorialspoint CSS Overflow-inline 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-inline - 使用 scroll 和 auto 值

以下示例演示如何將 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>Tutorialspoint CSS Overflow-inline 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-inline-auto">
         <h4>Tutorialspoint CSS Overflow-inline 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>

列印頁面