Bootstrap card [text-overflow: ellipsis] after a few lines of text

Question

I create a web application using the Bootstrap library. I use card classes. What I want to achieve is truncate too long text, as in the picture below:

Unfortunately, the only thing I manage to achieve is this result:

I would like the text to wrap over several lines, not immediately after the first.

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>

My css code:

.card-img {
  color: #fff;
  height: 10rem;
  object-fit:cover;
}

.description-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

What can I add or change to make the text go to the end of the card and then truncated?

delete white-space: nowrap; – s.kuznetsov Aug 13 '20 at 12:17 — s.kuznetsov, Aug 13 '20 at 12:17
Now the text doesn't wrap, it just expands the card. – Pawlit16 Aug 13 '20 at 12:29 — Pawlit16, Aug 13 '20 at 12:29

score 0 · Answer 1 · answered Aug 13 '20 at 12:18

0

You need to use some tricks to achieve this: https://css-tricks.com/line-clampin/#the-hide-overflow-place-ellipsis-pure-css-way

answered Aug 13 '20 at 12:18

izik

1,058
7
16

Bootstrap card [text-overflow: ellipsis] after a few lines of text

1 Answers1