Горизонтальная карта Bootstrap с телом карты, заполняющим вертикальное пространство и имеющим условную кнопку «расширитель» (подробнее)

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

.col-4 должен содержать изображение с использованием object-fit:cover.

.card-body может содержать контент произвольной длины. Ее следует сочетать со ссылкой «Читать далее», чтобы увеличить высоту карточки.

Вот что у меня пока есть...

<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"/>
<!DOCTYPE html>
<html lang = "en">
<body>
<div class = "card mb-3" style = "height:200px">
  <div class = "row g-0">
    <div class = "col-4" style = "height:200px">
      <img src = "https://dummyimage.com/400x700/000/fff" class = "img-fluid rounded-start object-fit-cover" style = "object-position: center; max-height: 100%;">
    </div>
    <div class = "col-8">
      <div class = "card-body flex flex-column">
        <div class = "long-content">
        <p>
    Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt, libero eu scelerisque ullamcorper, turpis est aliquam turpis, at fermentum magna metus vel odio. Nulla quis feugiat magna.Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt, libero eu scelerisque ullamcorper, turpis est aliquam turpis,
    </p> 
    <p>
    at fermentum magna metus vel odio. Nulla quis feugiat magna.Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt, libero eu scelerisque ullamcorper, tur
    </p><p>
    at fermentum magna metus vel odio. Nulla quis feugiat magna.Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt, libero eu scelerisque ullamcorper, tur
    </p><p>
    at fermentum magna metus vel odio. Nulla quis feugiat magna.Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt, libero eu scelerisque ullamcorper, tur
    </p>
      </div>
      <div class = "read-more">
      Read more
      </div>
    </div>
  </div>
</div>
</body>
</html>

Вы можете видеть, что .long-content перекрывает изображение.

Установка .height на уровне .card ничего не дает — контент переполняется.

Изображение слева должно вписываться в любое предоставленное пространство — отсюда и мое заявление .object-fit-cover. Хотя: обратите внимание на неприятную высоту, дублированную в родительском элементе. Если бы этого можно было избежать, это тоже было бы здорово.

Кроме того, контент должен растягиваться, и в идеале ссылка «Читать дальше» не должна отображаться, если контент не выходит за пределы.

html css twitter-bootstrap bootstrap-cards

10.05.2024 18:31

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете добавить overflow: hidden (или .overflow-hidden) с указанным max-height к вашему long-content:

.long-content {
  max-height: 150px;
  overflow: hidden;
}

<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"/>
<!DOCTYPE html>
<html lang = "en">
<body>
<div class = "card mb-3" style = "height:200px">
  <div class = "row g-0">
    <div class = "col-4" style = "height:200px">
      <img src = "https://dummyimage.com/400x700/000/fff" class = "img-fluid rounded-start object-fit-cover" style = "object-position: center; max-height: 100%;">
    </div>
    <div class = "col-8">
      <div class = "card-body flex flex-column">
        <div class = "long-content">
        <p>
    Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt, libero eu scelerisque ullamcorper, turpis est aliquam turpis, at fermentum magna metus vel odio. Nulla quis feugiat magna.Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt, libero eu scelerisque ullamcorper, turpis est aliquam turpis,
    </p> 
    <p>
    at fermentum magna metus vel odio. Nulla quis feugiat magna.Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt, libero eu scelerisque ullamcorper, tur
    </p><p>
    at fermentum magna metus vel odio. Nulla quis feugiat magna.Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt, libero eu scelerisque ullamcorper, tur
    </p><p>
    at fermentum magna metus vel odio. Nulla quis feugiat magna.Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt, libero eu scelerisque ullamcorper, tur
    </p>
      </div>
      <div class = "read-more">
      Read more
      </div>
    </div>
  </div>
</div>
</body>
</html>

text-overflow: ellipsis отобразит многоточие после усеченного содержимого.

12.05.2024 17:37

Другие вопросы по теме

Как увеличить изображение, когда пользователь прокручивает страницу до определенного раздела?

Попутный ветер меняет цвет текста во всех элементах ввода

Полоса прокрутки исчезает при нажатии на раскрывающееся меню

Как заставить мое приложение vuetify 3 nuxt 3 использовать видимое окно просмотра

Как использовать соседний селектор CSS на основе вложенных дочерних классов?

Tailwind CSS: как сделать так, чтобы изображение выскакивало из div

Как я могу использовать флажок Angular Material без дополнительного интервала?

Как расфокусировать кнопку в Blazor/C# при нажатии клавиши Escape без использования JavaScript?

Что такое верхнее поле, имеющее зазор?

Как увеличить отдельные части изображения при прокрутке

Горизонтальная карта Bootstrap с телом карты, заполняющим вертикальное пространство и имеющим условную кнопку «расширитель» (подробнее)

Ответы 1

Другие вопросы по теме

Похожие вопросы