начальная обертка и усечение загрузочной карты

Question

Я работаю над веб-приложением и борюсь с загрузочными картами.Независимо от того, что я делаю, я не могу заставить это сотрудничать.

У меня есть 5 карт подряд, и я использую наложение карт, чтобы добавить к ним текст.И мне нужно, чтобы текст был многострочным, переносился и, если действительно, был усеченным.И все это отзывчиво.Это вообще возможно?

<div class="row">
  <div class="col-md">
    <div class="card">
      <img class="card-img-top" src="https://dummyimage.com/300x200/aaa/000.jpg&text=+">
      <div class="card-img-overlay">
        <span class="hp-scene-text-center text-truncate">really long text that is so long that it doesnt fit in this cards overlay</span>
      </div>
    </div>
  </div>
</div>

и hp-scene-text-center это

.hp-scene-text-center {
  font-size: larger;
  display: block;
}