css超出隐藏

作者：影之哀伤发布日期:2026-07-15 浏览:42

/* 示例代码：CSS 超出隐藏 */

/* 定义一个容器，设置固定宽度和高度 */
.container {
  width: 200px;
  height: 100px;
  overflow: hidden; /* 当内容超出容器的宽度或高度时，隐藏溢出的内容 */
  border: 1px solid #000; /* 添加边框以便更好地看到效果 */
}

/* 容器内的内容 */
.content {
  width: 300px; /* 内容宽度大于容器宽度 */
  height: 150px; /* 内容高度大于容器高度 */
  background-color: lightblue; /* 设置背景颜色以便观察 */
}

解释说明：

overflow: hidden;：当元素的内容超出其容器的宽度或高度时，超出的部分将被隐藏，不会显示在页面上。
.container：定义了一个固定宽度和高度的容器，任何超出这个尺寸的内容都会被隐藏。
.content：定义了一个比容器更大的内容区域，但由于设置了 overflow: hidden，超出部分不会显示。

上一篇：css边框阴影

下一篇：css calc函数