如何用CSS Grid控制空间不足时单元格的文本截断？

要实现文本不换行、显示省略号且网格不超出容器，你需要调整Grid的列布局规则，并补全文本截断的必要样式，具体修改如下：

关键修改点 #

• 调整Grid列定义：将grid-template-columns: auto 1fr改为grid-template-columns: minmax(0, 1fr) auto。minmax(0, 1fr)能让文本列在可用空间内收缩，不会被超长内容撑开；右侧图标列用auto自适应其本身宽度。
• 移除不必要的flex-shrink: 0：这个属性会让Grid容器无法在Flex父容器中收缩，导致超出白色容器。
• 补全文本截断样式：给文本元素添加text-overflow: ellipsis，同时确保父容器的溢出被隐藏。

修改后的完整代码 #

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100vw;
  height: 100vh;
  background-color: silver;
}
.container {
  width: 200px;
  background-color: white;
  margin: auto;
  display: flex;
}
.grid {
  display: grid;
  width: 100%; /* 让Grid占满父容器的可用宽度 */
  grid-template-columns: minmax(0, 1fr) auto;
}
.nowrap {
  white-space: nowrap;
  text-overflow: ellipsis; /* 显示省略号 */
  overflow: hidden;
}
.col1 {
  overflow: hidden;
}

HTML

<div class="container">
  <div class="grid">
    <div class="col1">
      <span class="nowrap">A very long text that should not wrap</span>
    </div>
    <div class="col2">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="28"
        height="28"
        viewBox="0 0 24 24"
        fill="none"
        stroke="#6b9bd2"
        stroke-width="3"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
      </svg>
    </div>
  </div>
</div>

原理说明 #

• minmax(0, 1fr)打破了Grid列的“固有尺寸优先”特性，允许列收缩到0，从而适配父容器的宽度限制。
• 文本截断需要三个属性配合：white-space: nowrap（强制不换行）、overflow: hidden（隐藏溢出内容）、text-overflow: ellipsis（显示省略号），三者缺一不可。
• 给.grid添加width: 100%，确保它占满Flex容器的可用宽度，避免Grid自身尺寸不受限制。

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