Длинное название товара ломает строку, хотя у текста стоит многоточие

.row { display: flex; gap: 12px; }
.row img { width: 48px; flex-shrink: 0; }
.title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="row">
  <img src="…" alt="">
  <div class="title"><span>Очень длинное название товара…</span></div>
  <button>Купить</button>
</div>

Вместо многоточия строка вылезает за экран и выталкивает кнопку. Что исправит?