white-space: nowrap导致grid-item撑开，如何实现text-overflow？

当给链接添加white-space: nowrap后，Grid布局的1fr列会默认适配内容的最小宽度，导致.grid-item被超长文本撑开。要解决这个问题并实现text-overflow效果，只需添加以下样式约束：

步骤1：限制.grid-item的溢出行为 #

修改.grid-item的CSS，添加最大宽度和溢出隐藏规则：

.grid-item {
  background: white;
  border: 2px solid black;
  border-radius: 10px;
  padding: 5px;
  text-align: center;
  max-width: 100%; /* 强制不超出网格列的宽度 */
  overflow: hidden; /* 隐藏超出容器的内容 */
}

步骤2：给链接添加文本溢出处理 #

完善.grid-item-text-link的样式，让它支持省略号显示：

.grid-item-text-link {
  color: black;
  text-decoration: none;
  white-space: nowrap;
  transition: all .2s linear;
  display: inline-block; /* 让元素能继承宽度并应用text-overflow */
  width: 100%; /* 占满父容器的可用宽度 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

设置完成后，超长文本会被限制在网格列的宽度范围内，不会撑开.grid-item，同时超出的内容会以省略号形式展示。

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