CSS：显示：同一元素上的flex和文字省略号

Question

我正在尝试使用display: flex来与text-overflow: ellipsis一起使用，因此溢出的文本将被...截断。元素的宽度是通过其flex-basis从父级Flexbox定义的，请参见此处：

.parent {
  display: flex;
  min-width: 0;
}

.child {
  display: flex;
  background: yellow;
  flex: 0 0 5em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div class="parent">
  <div class="child">
    abcabcabcabcabcabcabc
  </div>
</div>

我已经搜索了类似的答案，但似乎没有一个确切的答案。我不想引入任何其他元素，并且想在元素上保留display: flex，因为我需要它来进行垂直居中。

Answer 1

正如@misorude所说，text-overflow适用于 block 容器元素。

尝试以下操作：

.parent {
  display: flex;
  min-width: 0;
}

.child {
  display: block;
  background: yellow;
  flex: 0 0 5em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div class="parent">
  <div class="child">
    abcabcabcabcabcabcabc
  </div>
</div>