嵌套Flex布局下text-ellipsis文本溢出省略失效问题求助

要实现嵌套Flex结构中文本的溢出省略，核心是打破Flex容器的最小宽度限制，同时给嵌套的垂直Flex容器分配明确的可用空间。

问题根源 #

外层.document是水平Flex容器，内部.infos是垂直Flex容器。默认情况下，垂直Flex容器的min-width:auto会让它始终撑开到能容纳内部内容的最小宽度，导致里面的strong元素的width:100%是内容本身的宽度，而非容器的可用空间，因此text-overflow:ellipsis无法触发。

修改后的代码 #

.document {
  display: flex;
  flex-wrap: nowrap;
}

figure {
  height: 64px;
  width: 64px;
  flex-shrink: 0; /* 固定图标尺寸，避免被压缩 */
}

.infos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1; /* 占据水平方向剩余空间 */
  min-width: 0; /* 解除Flex最小宽度限制 */
  padding-left: 12px; /* 可选：增加图标与文本的间距 */
}

strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%; /* 基于.infos的可用宽度设置自身宽度 */
}

<a href="My document with a very very very long text.pdf" class="document">
  <figure>
    <img src="/uploads/miniatures/Screenshot%202023-08-24%20125622.png" alt="My document with a very very very long text.pdf">
  </figure>
  <div class="infos">
    <strong>My document with a very very very long text.pdf</strong>
    <span>Now, 512.2 KB</span>
  </div>
</a>

关键修改说明 #

1. .infos添加flex:1：让垂直Flex容器在水平方向上占据除图标外的所有剩余空间，确保它有明确的可用宽度边界。
2. .infos添加min-width:0：Flex容器默认的min-width:auto会阻止容器被压缩到小于内容宽度，设置为0后，容器可以随父容器宽度变化而收缩，为内部文本溢出创造条件。
3. figure添加flex-shrink:0：固定图标的宽高，避免在容器宽度不足时被压缩变形。

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