CSS: display: 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 относится к блоку элементам контейнера.

Попробуйте следующее:

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