Flex布局下含flex-grow的单元格文本截断显示省略号问题

你的代码没生效的核心原因有两个：

1. Flex子项（.first-column）默认不会收缩到小于自身内容的最小宽度，空间不足时它不会被压缩，文本自然不会触发截断
2. .truncate元素没有明确的宽度约束，text-overflow: ellipsis需要元素有确定的宽度边界才能生效

修复方案 #

修改CSS代码，添加两处关键样式：

.parent {
  display: flex;
  border: 1px solid black;
  gap: 10px;
}

.first-column {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0; /* 新增：允许列收缩到小于内容最小宽度 */
}

.second-column {
  border: 1px solid steelblue;
}

.third-column {
  border: 1px solid green;
}

.value-cell {
  width: 50px;
  text-align: right;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%; /* 新增：让文本块占满父容器宽度 */
}

关键修改说明 #

• min-width: 0：解除Flex布局中子项的最小宽度限制，确保父容器空间不足时，.first-column可以被压缩，为文本截断提供前提条件
• width: 100%：让.truncate元素继承父容器的宽度，使其拥有明确的边界，当文本长度超过这个边界时，就会触发省略号效果

HTML代码无需修改，保持原样即可。

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