引导-防止div由于较大的文本而展开。

Question

我在HTML中有下面的源代码，基本上是一个引导卡：

<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类中文本的大小，对应于类card-footer的div向上或向下移动。是否有任何方法使card-footer保持静态，并且只限制文本的大小，比如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，以便在这些值之间包含它。