flexbox环境下text-overflow: ellipsis失效问题及解决诉求

当你用flex布局实现单元格居中时，text-overflow: ellipsis无法触发文本截断，但移除display: flex后功能正常，又想保留flex布局的话，可以按以下方式解决：

问题根源 #

text-overflow: ellipsis生效需要满足几个核心条件：元素为块级/inline-block、有明确宽度限制、内容溢出且white-space: nowrap、overflow: hidden。但单元格设为flex容器时，内部文本会被当作匿名flex项，默认会自动扩展宽度容纳内容，直接忽略容器的overflow设置，导致截断失效。

解决方案1：给文本套一层容器（推荐） #

最稳妥的方式是给单元格内的文本单独套一个容器（比如<span>），把截断相关样式移到这个容器上，同时保留单元格的flex布局实现居中。

修改后的CSS

.table {
  display: flex;
  flex-direction: column;
  width: fit-content;
  border: 1px solid #000;
}

.row {
  display: flex;
  height: 30px;
}

.row:not(:last-child) {
  border-bottom: 1px solid #000;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  padding-inline: 5px;
}

.cell:not(:last-child) {
  border-right: 1px solid #000;
}

/* 新增文本容器的截断样式 */
.cell-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%; /* 让容器占满单元格的可用宽度 */
}

修改后的HTML

<div class="table">
  <div class="row">
    <div class="cell"></div>
    <div class="cell"><span class="cell-text">Column 1</span></div>
    <div class="cell"><span class="cell-text">Column 2</span></div>
  </div>
  <div class="row">
    <div class="cell"><span class="cell-text">1</span></div>
    <div class="cell"><span class="cell-text">Text that is really long</span></div>
    <div class="cell"><span class="cell-text">Text that is even longer than the really long one</span></div>
  </div>
  <div class="row">
    <div class="cell"><span class="cell-text">2</span></div>
    <div class="cell"><span class="cell-text">Text that is really long</span></div>
    <div class="cell"><span class="cell-text">Text that is even longer than the really long one</span></div>
  </div>
  <div class="row">
    <div class="cell"><span class="cell-text">3</span></div>
    <div class="cell"><span class="cell-text">Text that is really long</span></div>
    <div class="cell"><span class="cell-text">Text that is even longer than the really long one</span></div>
  </div>
</div>

解决方案2：无额外标签的调整方式 #

如果不想添加额外HTML标签，可以通过调整flex容器属性实现：给单元格添加min-width: 0（允许flex容器收缩到小于内容宽度），同时保留文本截断样式并设置flex: 1让文本占满容器：

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  overflow: hidden;
  min-width: 0; /* 关键属性，解除flex容器的最小宽度限制 */
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1; /* 让文本占满容器可用宽度 */
}

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