CSS属性overflow:hidden为何无法隐藏padding区域后方内容？

你设置了容器固定宽高、overflow: hidden和内边距，期望文本在padding底部位置被截断，但实际文本超出了padding区域，没有按预期裁剪。

问题代码示例 #

div {
  display: grid;
  place-items: center;
  border: 1px solid;
  padding: 8px;
  width: 50px;
  height: 30px;
  overflow: hidden
}

<div>html html html html html</div>

原因分析 #

使用display: grid和place-items: center时，网格项（文本）会在容器的**内容盒（content box）**内居中对齐。当文本高度超过内容盒高度，overflow: hidden会裁剪超出内容盒的部分，但居中对齐会让文本向上下双向延伸，导致文本进入padding区域甚至超出容器边框，不符合你“在padding底部截断”的预期。

解决方法 #

方法1：嵌套内部容器，分离overflow与居中逻辑

把padding放在外部容器，内部容器负责居中与裁剪，文本会被限制在内部容器（对应外部容器的内容盒区域），不会进入padding区域：

.container {
  border: 1px solid;
  padding: 8px;
  width: 50px;
  height: 30px;
}
.content {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

<div class="container">
  <div class="content">html html html html html</div>
</div>

方法2：调整对齐方式，让文本从顶部排列

如果不需要居中，可去掉place-items: center，改用align-items: start，文本从内容盒顶部开始排列，超出内容盒的部分被裁剪，自然在padding底部位置截断：

div {
  display: grid;
  align-items: start;
  border: 1px solid;
  padding: 8px;
  width: 50px;
  height: 30px;
  overflow: hidden
}

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