设置align-items: end后CSS Grid单元格内容溢出问题求助

问题原因 #

当flex容器（.cell）设置flex-direction: column时，align-items控制的是水平方向的子元素对齐逻辑：

• 默认值stretch会让所有flex子元素自动拉伸至容器的水平宽度，因此.ellipsis能占满Grid单元格的50%宽度，触发text-overflow: ellipsis的省略效果。
• 当设置align-items: end后，flex子元素不再被强制拉伸，而是以自身内容的原始宽度渲染。此时.ellipsis的宽度等于长文本的实际宽度，超出了Grid单元格的宽度限制，导致内容溢出，且因元素本身宽度未受限，text-overflow: ellipsis无法生效。

解决方案 #

只需让.ellipsis元素强制占满容器的水平宽度即可，有两种实现方式：

方式1：给.ellipsis设置宽度为100% #

修改CSS中的.ellipsis样式：

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%; /* 强制占满容器宽度 */
}

方式2：给.ellipsis设置align-self: stretch #

通过align-self覆盖父容器的align-items设置，让该子元素单独拉伸：

.cell.end .ellipsis {
  align-self: stretch;
}

两种方式都能让.ellipsis占满Grid单元格宽度，触发文本省略效果，同时保持其他子元素（如Label）的右对齐。

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