Bootstrap card-text Предел до четырех строк

Question

У меня есть следующая строка HTML-кодов, и я хотел бы показать или отобразить только четыре строки описания на каждой карточке, а остальной текст будет отображаться, когда я нажму кнопку «readmore», которая, вероятно, отображается на разных страницах / страницах. Поэтому, как ограничить строки или символы в карточном тексте в начальной загрузке. Помощь приветствуется: -

 <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>

Answer 1

Ограничение текста количеством строк, возможно, не лучший способ сделать это. Bootstrap отзывчив и отображает различное количество строк в зависимости от размера устройства, поэтому вы не можете полагаться на него как на измерение.

Если вместо этого вы можете использовать wordcount, этот ответ SO содержит примеры создания фильтра усечения и применения его в разметке