Bootstrap - запретить размер текста влиять на следующую позицию div

Question

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

    .title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    <div class="row">
        <div class="col-lg-12">
            <ul class="list-unstyled">
                <!-- Products -->
                <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="{% img src %}"
                                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-2 title">
                                    Lorem ipsum dolor sit amet, consectetuer
                                    adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
                                    sociis natoque penatibus et magnis dis parturient montes, nascetur
                                    ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
                                    pretium quis, sem. Nulla consequat massa quis enim. Donec pede
                                    justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim
                                    justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam
                                    dictum felis eu pede mollis pretium. Integer tincidunt. Cras
                                    dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend
                                    tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend
                                    ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,
                                </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 body">
                                <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>
                <!-- End Products -->
            </ul>
        </div>
    </div>

Как видно из вышесказанного, на карте два divs. Один для заголовка, где я показываю большой текст, а другой, я использую его для другой информации в качестве обзоров.

Однако второй div - card-body class - сдвигается вниз, когда текст внутри h6 класс больше и находится там, где должен, когда текста меньше.

Для этого я думал ограничить и переполнить текст и ограничить отображение максимум двумя строками. Чтобы ограничить это, я использовал следующие свойства CSS:

Вышеупомянутое работает нормально, но второй div все еще влияет даже на это. Как я могу заблокировать / предотвратить отталкивание второго div в этой ситуации? Любые советы были бы замечательными. Спасибо!

Answer 1

попробуйте это:

.card-header {
height:100px;
overflow: hidden;
text-overflow: ellipsis; 
}

это вам поможет

white-space: nowrap;