我创建了一个由全部使用display: flex的div元素组成的表.我还在单元格元素上使用了display: flex，因为我使用了其他flex属性来居中文本.
我的问题是，表格单元格中的文本没有缩短，即使它在css中设置了text-overflow: ellipsis，而且溢出了.
从单元格元素中删除display: flex会使文本换行并实际使用text-overflow: ellipsis，但我真的希望这可以与Flexbox一起使用，并且我确信有一个解决方案.
.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;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-inline: 5px;
}
.cell:not(:last-child) {
border-right: 1px solid #000;
}<div class="table">
<div class="row">
<div class="cell"></div>
<div class="cell">Column 1</div>
<div class="cell">Column 2</div>
</div>
<div class="row">
<div class="cell">1</div>
<div class="cell">Text that is really long</div>
<div class="cell">Text that is even longer than the really long one</div>
</div>
<div class="row">
<div class="cell">2</div>
<div class="cell">Text that is really long</div>
<div class="cell">Text that is even longer than the really long one</div>
</div>
<div class="row">
<div class="cell">3</div>
<div class="cell">Text that is really long</div>
<div class="cell">Text that is even longer than the really long one</div>
</div>
</div>