Почему после добавления блоков текст становится без троеточий?

Question

[devfior]

Применяю для первого span стили, чтобы при уменьшении размер экрана текст сокращался:

#SPAN_4 {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

Но если я добавлю DIV_2 и DIV_3 (как в примере, они заданы с display: flex), то стили для сокращения текста уже не применяются. То есть, если сейчас убрать эти обертки, то он заработает, но потенциально они нужны для дополнительного контента и адаптивного верстке. Почему они так влияют и как это можно исправить?

Comments

[Ankhena]

ширины нет