css overflow hidden作用

作者：ンц枫飄落发布日期:2025-10-17 浏览:44

/* 示例代码 */

.container {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  overflow: hidden; /* 当内容超出容器的宽度或高度时，隐藏溢出的内容 */
}

.content {
  width: 300px;
  height: 300px;
  background-color: lightcoral;
}

<div class="container">
  <div class="content">
    这是一个超出容器尺寸的内容块。
  </div>
</div>

解释说明：

.container 类定义了一个固定大小的容器，宽度和高度均为 200px，并设置了 overflow: hidden。这意味着如果容器内的内容超出了这 200x200 的范围，超出部分将被隐藏，不会显示在页面上。
.content 类定义了一个比容器更大的内容块，宽度和高度均为 300px。由于其父容器设置了 overflow: hidden，超出的部分将被裁剪掉，用户只能看到容器范围内的内容。

如果你需要更多帮助，请告诉我！

上一篇：css 文本过长自动换行

下一篇：css文字两端对齐怎么设置