CSS的 overflow 属性详解

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

文章目录

• • • 1. visible（默认值）
    • 2. hidden
    • 3. scroll
    • 4. auto
    • 5. overflow-x 和 overflow-y

CSS的overflow属性用来管理元素内部内容溢出容器时的显示方式。以下是overflow属性的主要值及其示例代码：

1. visible（默认值）

• 说明：内容不会被修剪，会溢出容器并显示在容器外部。
• 示例：

  .visible-example {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    overflow: visible;
  }
  

2. hidden

• 说明：溢出的内容会被修剪，并且隐藏。
• 示例：

  .hidden-example {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    overflow: hidden;
  }
  

3. scroll

• 说明：无论内容是否溢出，始终显示滚动条。
• 示例：

  .scroll-example {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    overflow: scroll;
  }
  

4. auto

• 说明：只有当内容溢出时才显示滚动条。
• 示例：

  .auto-example {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    overflow: auto;
  }
  

5. overflow-x 和 overflow-y

• 说明：可以分别控制水平和垂直方向上的溢出行为。
• 示例：

  .xy-example {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    overflow-x: auto;
    overflow-y: hidden;
  }