概述

flex_layout_ellipsis.png

在开发中，我们常遇到这种布局：A、B、C 三段文本长度不固定，其中 A、C 占用空间较少，需要完整显示；而 B 是自适应区域，超出部分需省略显示。A 与 B 共享同一容器，右侧的 “Live” 按钮与该容器同级，容器应占据除 “Live” 之外的所有剩余空间。

HTML 结构如下：

1<div class="wrap">
2  <div class="infos">
3    <div>Soccer</div>
4    <div class="self">Campeonato De Reserva De Primera Division C</div>
5  </div>
6  <div class="live">Live</div>
7</div>
8

如果按照常规思路编写 CSS，比如：

1.wrap {
2  display: flex;
3  align-items: center;
4  width: 350px;
5  border: 1px dashed #ccc;
6  padding: 4px 16px;
7  gap: 16px;
8}
9
10.infos {
11  flex: 1;
12  display: flex;
13  gap: 8px;
14  align-items: center;
15}
16
17.self {
18  flex: 1;
19  padding: 4px;
20  background-color: silver;
21  border-radius: 6px;
22  overflow: hidden;
23  white-space: nowrap;
24  text-overflow: ellipsis;
25}
26
27.live {
28  padding: 4px 16px;
29  background: cornflowerblue;
30  border-radius: 6px;
31  color: white;
32  flex-shrink: 0;
33}
34
35

渲染效果往往会出现问题，示例如下：

flex_layout_wrong.png

可以看到，.self 会被内容撑开，导致 “Live” 被挤出容器。

异常分析

出现这种情况的根本原因是：

在 Flex 布局中，每个子元素的默认 min-width 是 auto。这意味着子元素的内容（文本）不会被压缩，即使父容器空间不足。

只有显式将 min-width 设为 0，才能让子项在空间受限时被压缩，从而使 overflow: hidden 与 text-overflow: ellipsis 生效。

更关键的是：

如果布局中存在嵌套的 flex 容器，那么 所有中间层的容器 也需要显式设置 min-width: 0，否则内部文本依然不会被压缩。

本例结构如下：

1.wrap (display: flex)
2  ├── .infos (display: flex)
3  │     ├── div (Soccer)
4  │     └── .self (文字太长)
5  └── .live
6

.infos 是 .wrap 的 flex 子项，默认 min-width: auto，会阻止内部 .self 被压缩。

因此，.infos 和 .self 都必须加上 min-width: 0。

实现

1<!DOCTYPE html>
2<html lang="zh-CN">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Flex 布局下文字省略不生效？原因其实很简单</title>
7    <style>
8      * {
9        margin: 0;
10        padding: 0;
11      }
12      body {
13        width: 100vw;
14        height: 100vh;
15        display: flex;
16        justify-content: center;
17        align-items: center;
18      }
19      .wrap {
20        display: flex;
21        align-items: center;
22        width: 350px;
23        border: 1px dashed #ccc;
24        padding: 4px 16px;
25        gap: 16px;
26      }
27
28      .infos {
29        flex: 1;
30        display: flex;
31        gap: 8px;
32        align-items: center;
33        min-width: 0; /* ✅ 必加，让内部 .self 可以被压缩 */
34      }
35
36      .self {
37        flex: 1;
38        min-width: 0; /* ✅ 必加，否则 ellipsis 不生效 */
39        padding: 4px;
40        background-color: silver;
41        border-radius: 6px;
42        overflow: hidden;
43        white-space: nowrap;
44        text-overflow: ellipsis;
45      }
46
47      .live {
48        padding: 4px 16px;
49        background: cornflowerblue;
50        border-radius: 6px;
51        color: white;
52        flex-shrink: 0;
53      }
54    </style>
55  </head>
56  <body>
57    <div class="wrap">
58      <div class="infos">
59        <div>Soccer</div>
60        <div class="self">Campeonato De Reserva De Primera Division C</div>
61      </div>
62      <div class="live">Live</div>
63    </div>
64  </body>
65</html>
66
67

总结

层级是否需要 min-width: 0原因
.wrap❌最外层容器，不需要压缩
.infos✅它是 .wrap 的 flex 子项，需要允许内部压缩
.self✅它是 .infos 的 flex 子项，真正要被省略的元素

结论：在嵌套的 Flex 布局中，任何包裹文字的中间层都必须显式设置 min-width: 0，否则 text-overflow: ellipsis 永远不会生效。

《Flex 布局下文字省略不生效？原因其实很简单》 是转载文章，点击查看原文。