如何让display:grid内的长文本div适配网格项尺寸？

开发者阿泽

2026-7-1

解决Grid布局中长文本溢出容器的问题

问题原因

.grid-item 设置了 width:100%，但默认 box-sizing: content-box 会让宽度仅计算内容区域，加上 padding 后总宽度超过网格列分配的空间，导致溢出。
网格布局中，网格项的宽度本应由 grid-template-columns 自动控制，手动设置 width:100% 反而引发盒模型计算冲突。

修复方案

方案1：统一盒模型（推荐）

给所有元素添加 box-sizing: border-box，让宽度计算包含 padding 和 border，从根源避免溢出：

* {
  box-sizing: border-box;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 300px;
  border: solid 5px grey;
  gap: 10px;
}
.grid-item {
  border: 1px solid #000;
  padding: 10px;
  display: flex;
  flex-direction: column;
  /* 无需手动设置width:100%，网格布局会自动填充 */
}
.long-text {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

方案2：移除网格项的width设置

直接删掉 .grid-item 中的 width:100%，让网格布局自动控制项的宽度，确保 .long-text 继承正确的父元素宽度：

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 300px;
  border: solid 5px grey;
  gap: 10px;
}
.grid-item {
  border: 1px solid #000;
  padding: 10px;
  display: flex;
  flex-direction: column;
  /* 去掉width:100% */
}
.long-text {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}