CSS:显示:同一元素上的 flex 和文本省略号

Question

我正在尝试让一个带有 display: flex 的元素与 text-overflow: ellipsis 一起工作，所以溢出的文本被截断为 ...。元素的宽度是通过父 flexbox 的 flex-basis 定义的，请参见此处:

.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>