如何用CSS按父容器形状裁剪子元素超出部分？技术问询

你不需要用文字颜色匹配外部背景这种风险高的hack，直接给父容器.container添加overflow: hidden属性，就能让父容器自动裁剪掉所有超出自身边界的子元素内容。

修改后的核心CSS代码 #

关键就是给.container加上overflow: hidden：

.container {
  margin: 2em;
  position: relative;
  width: 400px;
  height: 200px;
  background: #f1f1f1;
  overflow: hidden; /* 核心属性，裁剪超出内容 */
}

完整代码示例 #

CSS

.container {
  margin: 2em;
  position: relative;
  width: 400px;
  height: 200px;
  background: #f1f1f1;
  overflow: hidden; /* 关键：裁剪超出父容器的内容 */
}

.ads {
  position: absolute;
  right: 0;
  width: 5px;
  text-align: center;
  top: 50%;
  background: black;
  color: white; /* 不用再匹配外部背景，直接设置正常文字颜色 */
  transform: translateY(-50%);
  transition: 1s;
}

.ads b {
  pointer-events: none;
  width: 100px;
  display: block;
}

.ads:hover {
  width: 100px;
}

.high-level-container {
  margin: 2em;
  width: 500px;
  height: 600px;
  background: yellow;
}

HTML

<h3> 正常工作的效果 </h3>

<div class="container">
  <div class="ads">
    <b>Some Ads</b>
  </div>
</div>

<h3> 嵌套场景也稳定生效 </h3>

<div class="high-level-container">
  <div class="container">
    <div class="ads">
      <b>Some Ads</b>
    </div>
  </div>
</div>

原理说明 #

• overflow: hidden会让元素建立块级格式化上下文（BFC），它会自动裁剪所有超出自身边界的子元素内容，不管外部容器的背景是纯色还是图片，都能稳定生效。
• 相比颜色匹配的hack，这是CSS原生的内容裁剪方案，兼容性好，不会受外部样式变化影响。

内容的提问来源于stack exchange，提问作者AGamePlayer