How to prevent too long text expand its parent div

And keep as much text lines as div's height fits into.

<div class="row g-0">
  <div class="col-md-3 align-content-center">
    <div class="d-flex justify-content-center">
      <!-- svg image -->
    </div>
  </div>
  <div class="col-md-9 align-content-center">
    <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
  </div>
</div>

And as result I'd like to have:

|     | Lorem ipsum dolor |
| SVG | sit amet,         |
|     | consectetur ad... |

I'm playing with all this properties, but can't achieve desirable.

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-height: inherit;
position: absolute;

Is there a possible solution? If yes, could it be solved only with Bootstrap classes?

Thanks.

Solution

The text-truncate class does the same thing as the unused text-truncate-alt-1 defined below.

The CSS rules defined are not used, but here for alternative approaches.

.text-truncate-alt-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-truncate-alt-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="row g-0">
  <div class="col-md-3 align-content-center">
    <div class="d-flex justify-content-center">
      <svg xmlns="http://www.w3.org/2000/svg"
          height="140" width="150" style="background:rgba(0, 0, 0, 0.2)">
        <polygon points="75,7.5 129,38.5 129,101 75,132.5 21,101 21,38.5" style="fill:lime;stroke:green;stroke-width:1.5" />
        Sorry, your browser does not support inline SVG.
      </svg>
    </div>
  </div>
  <div class="col-md-9 align-content-center">
    <h5 class="card-title text-truncate">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </h5>
  </div>
</div>