如何让文本适配Div？Grid布局文本溢出问题排查与解决

你的代码里有几个关键问题导致文本溢出，梳理并修正如下：

核心错误点 #

• 错误的定位属性：你写的display: absolute是语法错误，正确的绝对定位是position: absolute，但这个属性会让元素脱离Grid布局的文档流，导致Grid容器无法正确计算子项尺寸，完全没必要添加。
• 盒模型计算问题：默认box-sizing: content-box下，padding:50px会额外加到元素宽度外侧，你的Grid列宽设为200px和100px，加上左右各50px的padding后，子项实际宽度会变成300px和200px，远超列宽，直接引发溢出。
• 冗余的布局方式：用多个h1标签加float实现左右对齐，不仅容易导致高度塌陷，还会因为h1默认的大字体和外边距挤占空间，加剧溢出问题。
• 语法错误：transform: translate(-50% -50%)缺少逗号分隔值，正确写法是transform: translate(-50%, -50%)，但这个属性在这里毫无用处。

修正后的完整代码 #

<style>
body {
  background-color: grey;
  margin: 0; /* 去除body默认外边距 */
}

.grid {
  padding: 2% 4% 0;
  display: grid;
  grid-template-columns: 200px 100px;
}

.grid-item {
  background-color: lightblue;
  border: 3px solid white;
  padding: 15px; /* 减小内边距，避免挤占内容空间 */
  box-sizing: border-box; /* 让内边距和边框计入元素总宽度 */
  display: flex; /* 用Flex实现内容左右对齐 */
  justify-content: space-between; /* 内容两端对齐 */
  align-items: center; /* 内容垂直居中 */
}

.grid-item h1 {
  margin: 0; /* 去除h1默认外边距 */
  font-size: 1.2rem; /* 调整字体大小适配容器 */
}
</style>

<div class="grid">
  <div class="grid-item">
    <h1>Grid</h1>
    <h1>1</h1>
  </div>
  <div class="grid-item">
    <h1>Grid</h1>
    <h1>2</h1>
  </div>
  <div class="grid-item">
    <h1>Grid</h1>
    <h1>3</h1>
  </div>
  <div class="grid-item">
    <h1>Grid</h1>
    <h1>4</h1>
  </div>
</div>

关键修改说明 #

1. 盒模型调整：给.grid-item添加box-sizing: border-box，确保内边距和边框不会超出Grid设置的列宽，元素总宽度严格等于列宽值。
2. Flex布局替代float：用display: flex+justify-content: space-between实现内容左右对齐，比float更简洁可靠，还能避免高度塌陷问题。
3. 内容适配调整：减小内边距、去除h1默认外边距、调整字体大小，让文本完全适配容器空间。
4. 清理无用代码：删掉错误的绝对定位相关代码，Grid子项无需这类定位来调整位置。

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