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

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

CSS Overflow-x: scroll和auto

CSS Overflow-x 属性可以设置为滚动或自动。 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>yxjc123 CSS Overflow-x Scroll</h4>
         I think success has no rules, but you can learn a lot from failure. 
      </div>
      <div class="overflow-x-auto">
         <h4>yxjc123 CSS Overflow-x Auto</h4>
         I think success has no rules, but you can learn a lot from failure. 
      </div>
   </div>
</body>
</html>