菜鸟教程
教程 css tutorial

溢出处理

当元素内容超过其容器大小时，CSS 的溢出属性决定内容如何显示或隐藏。

1. overflow 属性

控制溢出内容的行为：

css 
overflow: visible; /* 默认，内容溢出显示 */
overflow: hidden; /* 超出部分隐藏 */
overflow: scroll; /* 总是显示滚动条 */
overflow: auto; /* 内容溢出时显示滚动条 */

2. overflow-x 和 overflow-y

分别控制水平方向和垂直方向的溢出：

css 
overflow-x: auto;
overflow-y: hidden;

溢出处理示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>溢出处理示例</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      border: 1px solid #333;
      margin-bottom: 20px;
      padding: 5px;
    }
    .visible {
      overflow: visible;
      background-color: #c8e6c9;
    }
    .hidden {
      overflow: hidden;
      background-color: #ffcdd2;
    }
    .scroll {
      overflow: scroll;
      background-color: #bbdefb;
    }
    .auto {
      overflow: auto;
      background-color: #ffe082;
    }
  </style>
</head>
<body>
  <div class="box visible">
    overflow: visible<br/>
    这是一些超出容器宽高的内容。超出部分会显示出来。超出部分会显示出来。超出部分会显示出来。
  </div>
  <div class="box hidden">
    overflow: hidden<br/>
    这是一些超出容器宽高的内容。超出部分会被隐藏，不显示。
  </div>
  <div class="box scroll">
    overflow: scroll<br/>
    这是一些超出容器宽高的内容。滚动条总是出现。
  </div>
  <div class="box auto">
    overflow: auto<br/>
    这是一些超出容器宽高的内容。滚动条只有内容溢出时出现。
  </div>
</body>
</html>

相关内容