Bootstrap - предотвратить расширение div из-за большего размера текста

Question

У меня нижеприведенный исходный код в HTML, который в основном представляет собой карту Bootstrap:

<div class="card shadow-none card-fluid mb-3 mb-md-5">
    <div class="row">
        <div class="col-md-3 col-lg-3 mb-3 mb-sm-0">
            <img class="img-fluid rounded"
                src="{% static 'img url' %}"
                alt="Image Description">
        </div>
        <div class="col-md-9">
            <div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0">
                <h6 class="h5 mb-3">Text of 100 characters Text of 100 characters Text of 100 
                characters Text of 100 characters Text of 100 characters
                </h6>
                <p class="font-size-1">
                    Text of 20 characters.
                </p>
            </div>
            <div class="card-body p-0 px-0 py-md-0 py-lg-0 py-xl-0">
                <div class="row">
                    <div class="col-8 text-left">
                        <a class="d-inline-flex align-items-center">
                            <span class="static-rating static-rating-sm d-block mr-2">
                                <i class="fas fa-star text-warning"></i>
                                <i class="fas fa-star text-warning"></i>
                                <i class="fas fa-star text-warning"></i>
                                <i class="fas fa-star text-warning"></i>
                                <i class="fas fa-star-half-alt text-warning"></i>
                            </span>
                        </a>
                        <span class="d-inline-block">
                            <h6 class="mt-0 mb-2">4.95/5
                                <small class="text-white-70">(1.5k+)</small>
                            </h6>
                        </span>
                    </div>
                </div>
            </div>
            <div class="card-footer p-3 py-md-2 py-lg-2 mt-xl-5">
                <div class="row align-items-center">
                    <div class="col-6">
                        <button type="button"
                            class="btn btn-sm btn-link btn-icon-label hover-translate-y-n3">
                            <span class="btn-inner--icon btn-cust-icon">
                                <i class="mr-1" data-feather="edit-3"></i>
                            </span>
                            <span class="btn-inner--text">Edit</span>
                        </button>
                    </div>
                    <div class="col-6 text-right">
                        <button type="button"
                            class="btn btn-xs btn-outline-danger btn-icon-label hover-translate-y-n3">
                            <span class="btn-inner--icon">
                                <i data-feather="trash-2"></i>
                            </span>
                            <span class="btn-inner--text">Delete</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Проблема, с которой я сталкиваюсь, заключается в том, что в зависимости от размера текста внутри card-header класс, div соответствует классу card-footer, который перемещается вверх или вниз. Есть ли способ сохранить card-footer stati c и ограничить размер текста, скажем, до 120 символов?

Редактировать

Добавлен следующий фрагмент:

.custom-css {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* number of lines to show */
  -webkit-box-orient: vertical;
}

<li class="card shadow-none card-fluid mb-3 mb-md-5">
  <div class="row">
    <div class="col-md-3 col-lg-3 mb-3 mb-sm-0">
      <img class="img-fluid rounded" src="{% static 'img url' %}" alt="Image Description">
    </div>
    <div class="col-md-9">
      <div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0">
        <h6 class="h5 mb-3 custom-css">Text 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 characterscharactersText 100 charactersText 100 charactersText 100 charactersText
          100 charactersText 100 charactersText 100 charactersText 100 characterscharactersText 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 charactersText 100 characters
        </h6>
        <p class="font-size-1">
          Text length medium
        </p>
      </div>
      <div class="card-body p-0 px-0 py-md-0 py-lg-0 py-xl-0">
        <div class="row">
          <div class="col-8 text-left">
            <a class="d-inline-flex align-items-center">
              <span class="static-rating static-rating-sm d-block mr-2">
                                                            <i class="fas fa-star text-warning"></i>
                                                            <i class="fas fa-star text-warning"></i>
                                                            <i class="fas fa-star text-warning"></i>
                                                            <i class="fas fa-star text-warning"></i>
                                                            <i class="fas fa-star-half-alt text-warning"></i>
                                                        </span>
            </a>
            <span class="d-inline-block">
                                                        <h6 class="mt-0 mb-2">4.95/5
                                                            <small class="text-white-70">(1.5k+ review-uri)</small>
                                                        </h6>
                                                    </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</li>

Answer 1

вы могли бы дать ему min-height и max-height, а также min-width и max-width для сортировки между этими значениями.