When working on a web application using the Bootstrap library, I utilized card classes. The goal was to truncate text that was too long, as shown in the image below:
https://i.sstatic.net/4wKyT.jpg
However, the result I achieved looked different than expected:
https://i.sstatic.net/bIXuZ.png
I wanted the text to wrap over multiple lines instead of abruptly ending after the first line.
Here is my html code:
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-4">
<img src="https://wallpaperstock.net/eclipse_wallpapers_26124_1280x720.jpg" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text description-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
And here is my css code:
.card-img {
color: #fff;
height: 10rem;
object-fit:cover;
}
.description-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
I am looking for suggestions on what I can add or change to have the text extend to the edge of the card before being truncated.