Adjust product title length in css - Online Store

Question

i have a issue with adjusting the titles on my product page.

I have featured section in my page but the titles are in different length. I want to adjust the size so i tried this:

.fw-bold {
  margin-bottom: 10px;
}

.text-body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 28px;
  font-size: 15px;
  clear: both;
}

<div class="row justify-content-center">

    <div class="card">
      <img src="Images/Balsam.jpg" class="card-img-top" alt="...">
      <div class="card-body px-0">
        <div class="fs-xs"><a href="#" class="text-muted">Balsams</a></div>
        <div class="fw-bold"><a href="#" class="text-body">Serie Expert Absolut Repair lorem ipsum</a></div>
        <div class="btn-cont">
          <div class="fw-bold text-muted">$25.00</div>
          <a href="#" id="btn" class="btn btn-primary">Виж Продукт</a>
        </div>
      </div>
    </div>

    <div class="card">
      <img src="Images/microsoftteams-image-edited-v2.webp" class="card-img-top" alt="">
      <div class="card-body px-0">
        <div class="fs-xs"><a href="#" class="text-muted">Balsams</a></div>
        <div class="fw-bold"><a href="#" class="text-body">Serie Expert Absolut Repair Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto dolores, error repudiandae nostrum aut obcaecati! Libero minima, quas laboriosam quidem nostrum provident, laudantium quam veniam sequi et nisi ipsam ab.</a></div>
        <div class="btn-cont">
          <div class="fw-bold text-muted">$25.00</div>
          <a href="#" id="btn" class="btn btn-primary">Виж Продукт</a>
        </div>
      </div>
    </div>

    <div class="card">
      <img src="Images/microsoftteams-image-edited-v2.webp" class="card-img-top" alt="">
      <div class="card-body px-0">
        <div class="fs-xs"><a href="#" class="text-muted">Balsams</a></div>
        <div class="fw-bold"><a href="#" class="text-body">Serie Expert Absolut Repair</a></div>
        <div class="btn-cont">
          <div class="fw-bold text-muted">$25.00</div>
          <a href="#" id="btn" class="btn btn-primary">Виж Продукт</a>
        </div>
      </div>
    </div>

    <div class="card">
      <img src="Images/microsoftteams-image-edited-v2.webp" class="card-img-top" alt="">
      <div class="card-body px-0">
        <div class="fs-xs"><a href="#" class="text-muted">Balsams</a></div>
        <div class="fw-bold"><a href="#" class="text-body">Serie Expert Absolut Repair</a></div>
        <div class="btn-cont">
          <div class="fw-bold text-muted">$25.00</div>
          <a href="#" id="btn" class="btn btn-primary">Виж Продукт</a>
        </div>
      </div>
    </div>
  </div>


</div>

It worked but i want to add "..." at the end of the title, so the people would know that there is more to this title. Thanks you!