-1

I have following line of HTML codes and I would like to show or display only four lines of description in each card and rest text would display when I click on "readmore" button, which probably render in different page/pages. Therefore how to limit the lines or characters in card-text in bootstrap. Help is appreciated:-

 <div class="col-4 ml-2" *ngFor="let t of techBlogs">
                <div class="card shadow">
                  <div class="card-body">
                    <h2 class="card-title">{{t.title}}</h2>
                    <h4 class="card-text">{{t.name}}</h4>
                    <h4 class="card-text text-muted" id="run">{{t.postCreatedDate | date}}</h4>
                    <h4 class="card-text">Description: {{t.description}}
                      <a href="#" class="btn btn-success btn-sm">read more..</a>
                    </h4>
                  </div>
                </div>
              </div>
Urgen
  • 879
  • 1
  • 13
  • 29

2 Answers2

0

Limiting the text to number of lines may not be the best way to go about this. Bootstrap is responsive and will show a different number of lines depending on the size of the device, so you can't rely on it as a measurement.

If you are able to use wordcount instead, this SO answer has examples of creating a truncation filter and applying it in your markup

Nevelina A.
  • 146
  • 4
0

Set line-height in rem, then set height = number of lines * line-height

Das_Geek
  • 2,284
  • 7
  • 16
  • 24
Alex
  • 1