I'm trying to make a horizontal card with a limited height and a button expander to remove the height limit.
The .col-4 should contain an image using object-fit:cover.
The .card-body may contain arbitrary length content. It should be paired with a "Read more" link to expand the card height.
Here's what I have so far...
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/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>You can see .long-content is overlapping the image.
Setting .height at the .card level does nothing - the content overflows.
The image on the left should fit into whatever space is provided - hence my .object-fit-cover declaration. Although: note the nasty height duplicated in the parent element. If that could be avoided that would also be great.
In addition, the content should stretch and ideally the "Read more" link should not display if the content is not overflowing.
You could add overflow: hidden (or .overflow-hidden) with max-height specified to your long-content:
.long-content {
max-height: 150px;
overflow: hidden;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/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 will show an ellipsis after the truncated content.