如何在grid列的flexbox容器中实现text-overflow: ellipsis文本截断效果

实现方案 #

核心问题是grid列的宽度约束没有向下传递到文本容器，同时flex子项的强制不收缩规则阻碍了文本截断逻辑生效，调整几行CSS即可实现需求：

完整可运行代码

.grid {
  width: 300px;
  border: 1px solid black;
  display: grid;
  grid-template-columns: [main] minmax(0, 1fr) [foo] 20px [bar] 20px;
}

main {
  grid-column: main;
  background: yellow;
  /* 新增：让grid列的宽度约束传递到子元素，避免内容撑宽 */
  overflow: hidden;
}

.color-marker {
  height: 10px;
  width: 10px;
  background: red;
  border-radius: 50%;
  /* 仅给固定宽的标记设不收缩，文本元素不需要 */
  flex-shrink: 0;
}

.test {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foo {
  grid-column: foo;
  height: 20px;
  width: 20px;
  background-color: orange;
}

.bar {
  grid-column: bar;
  height: 20px;
  width: 20px;
  background-color: purple;
}

<div class="grid">
  <main>
    <div class="test">
      <div class="color-marker"></div>
      
      <span>
        Lorem ipsum
      </span>

      <span>
        sed do eiusmod tempor incididunt ut labore
      </span>

    </div>
  </main>
  <div class="foo">
  </div>
  <div class="bar">
  </div>
</div>

关键修改说明

1. 给main元素添加overflow: hidden：grid中minmax(0,1fr)仅定义了列的宽幅范围，需要父容器显式设置溢出隐藏，才能约束子元素宽度不超出列宽
2. 移除原代码中.test > * { flex: 0 0 auto; }规则：该规则强制所有flex子项不收缩，会导致文本元素宽度无法被压缩，自然无法触发溢出截断
3. 仅给固定宽度的.color-marker设置flex-shrink: 0：保证色块不会被压缩变形，文本span可以正常收缩
4. 将white-space: nowrap放到.test容器上：保证所有子元素文本不换行，配合overflow: hidden和text-overflow: ellipsis即可实现整体内容超出时显示省略号。

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