CSS - overflow-x 屬性

CSS overflow-x 屬性指定元素的內容超出其左右邊緣，以及水平方向上的溢位。

可能的值

visible − 允許元素的內容超出元素的左右邊緣。
hidden − 水平方向上溢位的任何內容都會被裁剪並且不顯示。
clip − 元素的內容會被裁剪，並且不會超出元素的左右邊緣。
scroll − 為元素新增水平捲軸。
auto − 僅當內容超出其左右邊緣時，才會為元素新增水平捲軸。

應用於

所有 HTML 元素。

DOM 語法

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

CSS overflow-x - 使用 hidden 和 visible 值

以下示例演示瞭如何使用overflow-x 屬性以及 hidden 和 visible 值 −

<html>
<head>
<style>
   .container {
      display: flex;
   }
   div.overflow-x-visible {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 60px;
      overflow-x: visible;
      margin-right: 100px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
   div.overflow-x-hidden {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 60px;
      overflow-x: hidden;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="overflow-x-visible">
         <h4>Tutorialspoint CSS Overflow-x Visible</h4>
         omnis dolor repellendus. non-characteristic words.
      </div>
      <div class="overflow-x-hidden">
         <h4>Tutorialspoint CSS Overflow-x Hidden</h4>
         omnis dolor repellendus. non-characteristic words.
      </div>
   </div>
</body>
</html>

CSS overflow-x - clip 值

當overflow-x 屬性設定為clip時，元素的內容會在元素的填充框的左右邊緣處被裁剪。

<html>
<head>
<style>
   div.overflow-x-clip {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 60px;
      overflow-x: clip;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
</style>
</head>
<body>
   <div class="overflow-x-clip">
      <h4>Tutorialspoint CSS Overflow-x Clip</h4>
      omnis dolor repellendus. non-characteristic words, Temporibus.
   </div>
</body>
</html>

CSS overflow-x - 使用 scroll 和 auto 值

CSS overflow-x 屬性可以設定為scroll或auto。scroll 會在元素的內容超出其寬度時為元素新增捲軸，而 auto 僅在內容超出其寬度時才會新增捲軸。

這是一個示例 −

<html>
<head>
<style>
   .container {
      display: flex;
   }
   div.overflow-x-scroll {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 70px;
      overflow-x: scroll;
      margin-right: 100px;
   }
   h4 {
      text-align: center;
      color: #D90F0F;
   }
   div.overflow-x-auto {
      background-color: #2fe262;
      border: 2px solid #000000;
      width: 70px;
      overflow-x: auto;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="overflow-x-scroll">
         <h4>Tutorialspoint CSS Overflow-x Scroll</h4>
         omnis dolor repellendus. non-characteristic words.
      </div>
      <div class="overflow-x-auto">
         <h4>Tutorialspoint CSS Overflow-x Auto</h4>
         omnis dolor repellendus. non-characteristic words.
      </div>
   </div>
</body>
</html>

列印頁面