如何使文本省略号在display:flex布局下生效？已尝试min-width:0仍无效

你给出的代码中，虽然给.test添加了min-width: 0，但仍可能因为flex布局的默认特性导致文本省略失效。以下是修正方案和原因说明：

修正后的代码 #

CSS #

.app{
  display: flex;
  cursor: pointer;
  /* 可选：限制父容器宽度，确保子元素的max-width能生效 */
  width: 100%;
}
.test{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  border: 1px solid navy;
  min-width: 0;
  /* 显式允许元素收缩，默认值为1，显式设置更稳妥 */
  flex-shrink: 1;
}

HTML #

<div class="app">
  <div class="test">Test Test Test Test Test Test</div>
</div>

问题原因 #

flex布局中，子元素默认的min-width: auto会强制元素宽度至少容纳内部内容，导致overflow: hidden无法触发。设置min-width: 0可以打破这个限制，让元素宽度能小于内容宽度。同时配合flex-shrink: 1（默认已开启，显式设置更清晰），确保元素在父容器空间不足时可以收缩，最终让文本省略号正常显示。

如果父容器没有宽度约束，子元素的max-width可能无法生效，因此给.app设置width: 100%或具体宽度，能进一步确保子元素的宽度限制生效。

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