subgrid布局中text-overflow: ellipsis失效，如何实现文本溢出截断？

我原本用table实现布局遇到问题，转而采用subgrid（效果更优）。当前布局需要展示姓名与评论，要求内容单行显示且不溢出，但目前文本过长时要么换行导致行高增加，要么溢出容器。我尝试使用text-overflow: ellipsis与overflow:hidden属性，但未生效，用table也无法解决。

以下是我的代码、当前效果及期望效果：

我的代码 #

CSS #

html {
  background-color: purple;
  height: 100%;
  width: 100%;
  background-color: black;
}

body {
  max-height: 600px;
  max-width: 800px;
  min-height: 600px;
  min-width: 800px;
  background-color: purple;
}

.b {
  background-color: blue;
}

.g {
  background-color: green;
}

.r {
  background-color: red;
}

.y {
  background-color: yellow;
}

.c {
  background-color: cyan;
}

.m {
  background-color: magenta;
}

.w {
  background-color: white;
}

.p {
  background-color: pink;
}

.l {
  background-color: lime;
}

HTML #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />

<body class="d-flex flex-column h-100">
  <div class="flex-grow-1 b d-flex flex-column gap-3">
    <div>asfdsa</div>
    <div className="m">

      <!-- Table Container -->
      <div class="justify-content-center overflow-hidden g flex-grow-1  m-1" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-auto-flow: row ">
        <!-- Header -->
        <div class="border-bottom r border-2" style="display: grid; grid-column: 1 / -1; grid-template-columns: subgrid ">
          <div class="border-start p-2 l">Username</div>
          <div class="border-start p-2 p">Message</div>
          <div class="border-start p-2 w">Comment</div>
        </div>

        <!-- Data Row 1-->
        <div class="bg-info m-2 p-2 rounded" style="display: grid; grid-column: 1 / -1; grid-template-columns: subgrid">
          <div className="border-start p-2 l">Jack Brown</div>
          <div className="border-start p-2 p">It's done.</div>
          <div className="border-start p-2 w">That's good dear. Did you also remember to bring the lorem ipsum? It's on sale tonight. K thx love u</div>
        </div>
        <!-- Data Row 2-->
        <div class="bg-info m-2 p-2 rounded" style="display: grid; grid-column: 1 / -1; grid-template-columns: subgrid">
          <div className="border-start p-2 l">Alastair Percival Montague-Fitzherbert St. John-Reginald Archibald Crispin Harcourt</div>
          <div className="border-start p-2 p">Oi Mate</div>
          <div className="border-start p-2 w">value</div>
        </div>
        <!-- Data Row 3-->
        <div class="bg-info m-2 p-2 rounded" style="display: grid; grid-column: 1 / -1; grid-template-columns: subgrid">
          <div className="border-start p-2 l">Lin Dong</div>
          <div className="border-start p-2 p">Heeeeeelp my eeeeeeee keeeeeeeey is brokeeeeeeeeeeen eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
          <div className="border-start p-2 w">K.</div>
        </div>
      </div>
    </div>

  </div>
</body>

当前效果 #

期望效果 #

请问如何正确实现文本截断以避免溢出？

要实现subgrid布局下的文本单行截断，需要满足两个核心条件：元素有明确的宽度约束，以及设置完整的截断CSS属性。另外你代码里存在className拼写错误（HTML里应该用class），这也可能导致样式不生效。

步骤1：添加截断样式类 #

在CSS中新增一个用于文本截断的类：

.text-truncate-cell {
  white-space: nowrap; /* 强制文本单行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  min-width: 0; /* 关键：允许网格单元格收缩以适应父容器宽度 */
}

步骤2：修正HTML并应用截断类 #

把所有className改为class，并给需要截断的单元格添加.text-truncate-cell类：

修改后的HTML代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />

<body class="d-flex flex-column h-100">
  <div class="flex-grow-1 b d-flex flex-column gap-3">
    <div>asfdsa</div>
    <div class="m">

      <!-- Table Container -->
      <div class="justify-content-center overflow-hidden g flex-grow-1  m-1" style="display: grid; grid-template-columns: 1fr auto 1fr; grid-auto-flow: row ">
        <!-- Header -->
        <div class="border-bottom r border-2" style="display: grid; grid-column: 1 / -1; grid-template-columns: subgrid ">
          <div class="border-start p-2 l">Username</div>
          <div class="border-start p-2 p">Message</div>
          <div class="border-start p-2 w">Comment</div>
        </div>

        <!-- Data Row 1-->
        <div class="bg-info m-2 p-2 rounded" style="display: grid; grid-column: 1 / -1; grid-template-columns: subgrid">
          <div class="border-start p-2 l text-truncate-cell">Jack Brown</div>
          <div class="border-start p-2 p text-truncate-cell">It's done.</div>
          <div class="border-start p-2 w text-truncate-cell">That's good dear. Did you also remember to bring the lorem ipsum? It's on sale tonight. K thx love u</div>
        </div>
        <!-- Data Row 2-->
        <div class="bg-info m-2 p-2 rounded" style="display: grid; grid-column: 1 / -1; grid-template-columns: subgrid">
          <div class="border-start p-2 l text-truncate-cell">Alastair Percival Montague-Fitzherbert St. John-Reginald Archibald Crispin Harcourt</div>
          <div class="border-start p-2 p text-truncate-cell">Oi Mate</div>
          <div class="border-start p-2 w text-truncate-cell">value</div>
        </div>
        <!-- Data Row 3-->
        <div class="bg-info m-2 p-2 rounded" style="display: grid; grid-column: 1 / -1; grid-template-columns: subgrid">
          <div class="border-start p-2 l text-truncate-cell">Lin Dong</div>
          <div class="border-start p-2 p text-truncate-cell">Heeeeeelp my eeeeeeee keeeeeeeey is brokeeeeeeeeeeen eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
          <div class="border-start p-2 w text-truncate-cell">K.</div>
        </div>
      </div>
    </div>

  </div>
</body>

关键说明 #

• min-width: 0：网格元素默认有min-width: auto，会阻止元素收缩到内容宽度以下，添加这个属性才能让单元格在父容器宽度不足时收缩，触发截断。
• 修正className为class：HTML中没有className属性，只有class，之前的错误会导致样式无法正确应用到元素上。
• 确保父网格的列宽设置合理：你的父网格用grid-template-columns: 1fr auto 1fr，中间列自适应内容，左右两列平分剩余空间，这个布局本身是合理的，配合截断类就能实现单行不溢出的效果。

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