css 溢出隐藏

作者：木齵乄语发布日期:2025-06-28 浏览:74

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

/* 示例 HTML 结构 */
/*
<div class="container">
  <p>这是一些文本，当文本内容超出容器的宽度或高度时，超出的部分将被隐藏。</p>
</div>
*/

解释说明：

overflow: hidden;：当容器中的内容超出其指定的宽度或高度时，超出的部分将被隐藏，不会显示在页面上。
width 和 height：定义了容器的尺寸。如果内容超出了这些尺寸，则会被隐藏。
border：只是为了更直观地看到容器的边界，不是必须的。

如果你需要更多的样式控制，比如只隐藏水平或垂直方向的溢出内容，可以使用 overflow-x 或 overflow-y 属性。

上一篇：css @page

下一篇：css渐变边框