使用overflow:hidden时如何实现带底部内边距且不裁剪文本？

DevOps 小满

2026-5-15

解决overflow:hidden与底部padding共存的问题

嘿，我完全懂你遇到的困扰——给固定高度的容器加了overflow:hidden和padding后，顶部、左右的padding都正常生效，唯独底部的padding好像被溢出的文本“吃掉”了，看不到本该有的红色区域，而且你还不想用伪元素，希望文本能和底部padding和谐共处，对吧？

问题根源

这其实是CSS盒模型和overflow:hidden的裁剪规则导致的：当你把overflow:hidden直接应用在带padding的容器上时，溢出的文本会延伸到容器的padding区域（也就是底部那10px的红色空间），而overflow:hidden的裁剪边界是容器的整个padding box（从边框到边框的范围），所以溢出的文本会填满底部padding，导致你看不到它的存在。

解决方案（不用伪元素）

最简单的办法是给内容套一个内部容器：让外部容器负责固定高度和padding，内部容器专门处理overflow:hidden。这样内部容器的高度会自动适配外部容器的内容区高度（也就是总高度减去上下padding的180px），溢出的文本会被内部容器裁剪在padding的上方，外部容器的底部padding就能正常显示出来了。

修改后的代码：

<div class="box-test">
  <div class="content">
    Stack Test Test Test sdf OverflowStack Test Test Test sdf OverflowStack Test Test Test sdf OverflowStack Test Test Test sdf OverflowStack Test Test Test sdf OverflowStack Test Test Test sdf OverflowStack Test Test Test sdf OverflowStack Test Test Test sdf Overflow
  </div>
</div>

.box-test {
  background-color: red;
  width: 200px;
  height: 200px;
  padding: 10px;
  box-sizing: border-box;
}

.content {
  height: 100%;
  overflow: hidden;
}

body {
  background-color: green;
}