CSS text-overflow: ellipsis不生效，如何实现响应式文本溢出省略？

失效原因 #

text-overflow: ellipsis 未生效的核心原因是flex布局的默认规则限制：flex子项默认min-width: auto，即子项最小宽度不会小于内部内容宽度，文本过长时会直接撑开父容器，无法触发溢出隐藏逻辑，和你猜测的需要限制宽度逻辑一致，但不需要写固定宽度，调整flex规则即可实现响应式适配。

修改方案 #

仅需调整2处CSS规则即可：

.c-vis__head-left {
  display: flex;
  align-items: center;
  /* 替换原有的justify-content: end，避免内容右对齐 */
  justify-content: flex-start;
  /* 让左侧容器占满flex父容器剩余可用宽度 */
  flex: 1;
  /* 关键：取消flex子项默认最小宽度限制，允许容器随视口收缩 */
  min-width: 0;
}

.c-vis__head-text {
  font-size: 20px;
  font-weight: normal;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 可选：补充最小宽度限制，提升兼容性 */
  min-width: 0;
}

修改后左侧文本区域会自动适配父容器剩余宽度，文本超出时自动显示省略号，右侧时长标签始终固定在右侧，完全符合响应式布局要求。

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