CSS overflow-x 属性-之路教程

语法

overflow-x: visible | hidden | scroll | auto | initial | inherit;

overflow-x 属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x 属性示例</h2>
    <h3>Overflow-x: scroll</h3>
    <div class="example">
      经历过风雨，才懂得阳光的温暖。
    </div>
  </body>
</html>

具有“可见”值的overflow-x 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #cccccc;
        width: 40px;
        overflow-x: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x 属性示例</h2>
    <h3>Overflow-x: visible</h3>
    <div class="example">
      经历过风雨，才懂得阳光的温暖。
    </div>
  </body>
</html>

带有“隐藏”值的 overflow-x 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x 属性示例</h2>
    <h3>Overflow-x: hidden</h3>
    <div class="example">
      经历过风雨，才懂得阳光的温暖。
    </div>
  </body>
</html>

带有 "auto" 值的 overflow-x 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div.example {
        background-color: #1c87c9;
        color: #fff;
        width: 40px;
        overflow-x: auto;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x 属性示例</h2>
    <h3>Overflow-x: auto</h3>
    <div class="example">
      经历过风雨，才懂得阳光的温暖。
    </div>
  </body>
</html>

包含所有值的 overflow-x 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      div.scroll {
        background-color: #ccc;
        width: 50px;
        overflow-x: scroll;
      }
      div.hidden {
        background-color: #ccc;
        width: 50px;
        overflow: hidden;
      }
      div.auto {
        background-color: #ccc;
        width: 50px;
        overflow: auto;
      }
      div.visible {
        background-color: #ccc;
        width: 50px;
        overflow: visible;
      }
    </style>
  </head>
  <body>
    <h2>Overflow-x 属性示例</h2>
    <h3>overflow-x: scroll</h3>
    <div class="scroll">
      经历过风雨，才懂得阳光的温暖。
    </div>
    <h3>overflow-x: hidden</h3>
    <div class="hidden">
      经历过风雨，才懂得阳光的温暖。
    </div>
    <h3>overflow-x: auto</h3>
    <div class="auto">
      经历过风雨，才懂得阳光的温暖。
    </div>
    <h3>overflow-x: visible</h3>
    <div class="visible">
      经历过风雨，才懂得阳光的温暖。
    </div>
  </body>
</html>

CSS overflow-x 属性

overflow-x 属性指定当内容溢出元素的左右边缘时，内容是否应该隐藏、可见或者水平滚动。
此属性是 CSS3 属性之一。

overflow-x 属性有四个主要值：visible、scroll、auto 和 hidden。

如果overflow-y 属性是hidden、scroll 或者auto，并且overflow-x 默认是可见的，它将计算为auto。

初始值	visible
应用于	块容器，柔性容器和网格容器。
继承	无效
可动画的	无效
版本	CSS3.
DOM 语法	object.Style.overFlowX =“visible”;

CSS overflow-x 属性值说明

值	描述
visible	内容不会剪裁并在填充盒的左边缘和右边缘外呈现。这是此属性的默认值。
hidden	内容夹在填充箱中水平贴合。没有添加滚动条。
scroll	内容夹在填充箱中水平贴合。添加滚动条以查看其余内容。
auto	内容夹在填充箱中水平贴合。取决于浏览器。如果内容溢出，则添加滚动条。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

日期：2020-06-02 22:14:42 来源：oir作者：oir

←CSS overflow-wrap 属性

CSS overflow-y 属性→

语法